0
点赞
收藏
分享

微信扫一扫

animation动画

斗米 2022-03-11 阅读 52

构成一个动画的最基本属性需要 一个@keyframes 和 duration

@keyframes (go) {  

form{

  transform:translateX(0px)  translateY(0);

to{

transtion

transform:translateX(200px)  translateY(0);

}}

animation:  go 2s  ease-in   3s  2  forwards;

2s内执行完,规定动画的速度曲线,延迟3s,循环播放2次,停留在终点。

 

animation 属性是一个简写属性,它是下面属性的缩写:

animation-name  定义@keyframes时的名称
animation-duration  动画持续时间
animation-timing-function改变动画运动的速度曲线
animation-delay  延迟多少时间
animation-iteration-count  播放动画的次数
animation-direction  设置infinite无限循环或n代表几次
animation-fill-mode  动画结束后forwards停在终点

 

 

 

举报

相关推荐

0 条评论