web前端html和css笔记4——关键帧
CSS animation 属性
animation 属性是一个简写属性,用于设置六个动画属性:
- animation-name :规定需要绑定到选择器的 keyframe 名称。。
- animation-duration:规定完成动画所花费的时间,以秒或毫秒计。
- animation-timing-function:规定动画的速度曲线。
- animation-delay:规定在动画开始之前的延迟。
- animation-iteration-count:规定动画应该播放的次数。
- animation-direction:规定是否应该轮流反向播放动画。
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
默认留个参数的值是:none 0 ease 0 1 normal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
position: relative;
width: 200px;
height: 150px;
border: 2px solid red;
/*
animation-name:move 绑定到选择器的 keyframe 名称是移动
animation-duration:10s 完成动画所花费的时间10s
animation-timing-function:linnear 规定动画的速度曲线:线性
animation-delay:规定在动画开始之前的延迟:默认0 延迟
animation-iteration-count:规定动画应该播放的次数:infinite无限次循环
animation-direction:规定是否应该轮流反向播放动画默认:normal 不返向
*/
animation: move 10s linear infinite;
}
@keyframes move {
/* 在进度为0%的时候的状态 */
0% {
left: 0;
top: 0;
border-color: red;
}
/* 在进度为25%的时候的状态:left变成500px,可见往右跑了 */
25% {
left: 500px;
top: 0;
border-radius: 0;
border-color: red;
}
/* 在进度为50%的状态
top变成300px,可见往后跑了
border-radius变成50%,可见变成圆角了*/
50% {
top: 300px;
left: 500px;
border-color: #00a2e8;
border-radius: 50%;
}
/* 在进度为75%的状态
left又变成0,可见往左跑了
圆角依然不变*/
75% {
left: 0;
top: 300px;
border-color: #00a2e8;
}
/* 进度变成100% 恢复到0状态 */
100% {
top: 0;
left: 0;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>