常用animation动画

CSS动画详解
本文详细介绍了CSS动画的各项属性设置,包括动画名称、持续时间、方向、执行次数、结束后位置、延迟及运动方式等,并提供了具体示例。

/*编辑动画名*/
animation-name: myDemo;

/*动画持续时间*/
animation-duration: 6s;

/*动画方向*/
/*reverse 反向*/
/*alternate 从后向前播放动画*/
/*alternate-reverse 从后向前播放动画且反向*/
animation-direction: alternate;

/*动画执行次数*/
/*infinite 循环播放*/
animation-iteration-count: infinite;

/*动画结束后的位置*/
/*forwards 保留最后一个属性值*/
animation-fill-mode: forwards;

/*动画延迟*/
animation-delay: 1s;

/*动画运动方式*/
/*linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始,然后加快,在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。*/
animation-timing-function: linear;

转载于:https://www.cnblogs.com/victory-jc-notes/p/8093286.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值