加载中...
PAGE

CSS animation 属性

Post on 2021-10-27 14 0

animation: name duration timing-function delay iteration-count direction fill-mode play-state
animation:动画名称 动画时间 运动方法 何时开始 播放次数 是否反方向 不播放时样式 运行状态;
下面是每个参数详细的解释及参数

animation-name 动画名称
为动画设定一个名称,需对应@keyframes的名称
例:

div{ animation-name:myAnimation; } @keyframes myAnimation{ from {} to {} }

animation-duration 动画时间
为动画设定运动总时长
例:
animation-duration:5s;设置时长为5秒(如果时长为0.5秒,则可以省略为.5s

animation-timing-function 运动方法
设置动画如何完成一个周期
例:
animation-timing-function: linear;
可用参数如下
timing-function
animation-delay 何时开始
设置动画的延时时长
例:
animation-delay: 5s; 设置延时为5秒(5秒后才会触发)

animation-iteration-count 播放次数
设置动画触发时播放的次数
例:
animation-iteration-count: 5; 设置播放次数为5次(如果设置为infinite就是永远播放)

animation-direction 是否反方向
设置动画是否循环交替反向播放
例:
animation-direction: reverse;
可用参数如下
direction
animation-fill-mode 不播放时样式
设置当动画不播放时,使用的样式
例:
animation-fill-mode: none; 设置不播放时无样式
可用参数如下
fill-mode
animation-play-state 运行状态
设置动画当前的播放是否为正在运行或已暂停
例:
animation-play-state: paused; 设置暂停动画
可用参数如下
play-state

animation的使用示例:

animation: go 3s linear 0s 1 normal; @keyframes go {   0% {top:0px;}   50%{top:50px;}   100%{top:100px;} }
ubuntu16.04 安装ssh

ubuntu16.04 安装ssh

阅读更多
mysql 根据日期进行查询数据,没有数据也要显示空

mysql 根据日期进行查询数据,没有数据也要显示空

阅读更多
mysql FROM多表时同时做为left join参数时报错

mysql FROM多表时同时做为left join参数时报错

阅读更多

暂无评论

    发表评论
    返回顶部
    X