css动画的实例讲解(逆战班)

今天总结了css动画的主要定义和用法。
animation-name(必填) //名称
animation-duration(必填) //完成动画时间
animation-timing-function //动画运动速度
值: linear 匀速
ease(默认) 变速(先慢后快,再由快变慢)
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(x,x,x,x) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
animation-delay //动画启动前的延迟时间
animation-iteration-count //动画的播放次数 infinite 动画无限次播放
animation-direction /播放方式
值: normal 正常
reverse 反向播放
alternate 在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放
alternate-reverse 在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放
animation-fill-mode //动画完成时.要处于什么状态
值: none 默认,播放完动画后,画面停在起始位置
forwards 在运动结束的之后,停到结束位置
backwards 在延迟的情况下,让0%在延迟前生效
both backwards和forwards同时生效

##足球场实例
球场布局
定义立体球场
首先利用ul标签给足球场一个简易的布局,利用transform-style: preserve-3d给ul、li显示3d空间,利用transform变形和position定位形成一个立体的足球场。perspective定义查看3d视图的角度。
在这里插入图片描述
给ul定义动画circle,使球场进行旋转,利用transform-origin定义动画的旋转基点。给li3(也就是球员所在的绿色球场)定义动画top,使球员上下移动和调节透明度。
动画代码
形成一个简易的动态足球场。
旋转的主球场和消失不见的球员

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值