动画
程序员文章站
2022-05-01 20:15:21
...
CSS常用属性
动画
定义动画:
(一)普通定义动画
@keyframes 动画名字 {
from{
初始样式
}
to{
改变后样式
}
}
(二)百分比定义动画
@keyframes 动画名字 {
百分比{改变后样式}
}
eg:@keyframes aa {
0%{background-color: rgb(252, 47, 32)}
25%{background-color: rgb(236, 138, 25)}
50%{background-color: rgb(131, 245, 55)}
75%{background-color: rgb(73, 236, 222)}
100%{background-color: #b633f3}
}
使用动画:
animation:动画名字 执行时间 执行次数(infinite)等
动画属性:
1) animation-delay:3s; 开始时间
animation-name:ly; 动画名字
animation-duration:3s; 动画执行时间
2) animation-timing-function:linear; 动画执行速度
linear:匀速
ease : 默认值,慢 到快 再到慢
3) animation-fill-mode:forwards;动画结束后的样式
none 默认值 动画前什么样,结束后就什么样
forwards 动画结束时,是什么样式,就是什么样式
4) animation-iteration-count:infinite; 规定动画执行次数
值为: 数字 或者 infinite无限循环
5) animation-direction:alternate;
normol 正向旋转
reverse 反向旋转
alternate 奇数正向 偶数反向
alternate-reverse 奇数反向 偶数正向
5) animation-play-state:paused;
running 播放 默认值
paused 暂停
上一篇: Mssql,Access的sql经典SQL语句大全
下一篇: 女神节怎么过