为了账号安全,请及时绑定邮箱和手机立即绑定

静态页面中常用到的动画效果运用

标签:
Html/CSS

@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration动画 持续时间。默认是 0。
animation-timing-function 规定动画的速率。默认是 "ease"。有五中 (ease in,加速 开始慢easr out,减速 结束慢 linear 匀速 ease in out,先加后减,贝塞尔曲线。)
animation-delay 动画延迟时间。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。无限次 ;infinite.
animation-direction (方向)规定动画是否在下一周期逆向地播放。默认是 "normal",alternate,一反一正。alternate-reverse,一正一反。reverse;反向。
animation-fill-mode 规定对象动画时间之外的状态。forwards,保持结束是状态。backwards,保持开始时的状态,both,开始时处于开始状态,结束处于结束状态。
animation: myfirst 5s linear 2s infinite alternate; 简写写法;
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消