css3动画使用

html-css010

css3动画使用,第1张

animation实现动画由俩个部分组成,通过类似flash动画的关键帧来申明一个动画,在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

关键帧 例如:

调用关键帧:

语法 animation:animation-name animation-duration animation-timing-function  animation-delay animation-iteration-count animation-direction

animation-name 由 @keyframes 创建的动画名称

animation-duration过渡时间

animation-timing-function过渡方式

animation-delay延迟时间

animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放

animation-direction动画的播放方向,alternate为偶数次向前播放,normal动画每次都是循环向前播放

练习如下:

该图形的变化从左上角到右上角来回跳动的一个过程

linear  规定以相同速度开始至结束的过渡效果

ease  规定慢速开始,然后变快,然后慢速结束的过渡效果(默认值)

ease-in 规定以慢速开始的过渡效果

ease-out  规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

 perspective:500px透视 也可以理解为视距,可以理解为 你的眼睛距离物体的距离  距离物体越近 物体就越大,距离物体越远 物体就越小

transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转

transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转

 transform: translate3d(0, 0, 200px)效果如下:

 translate3d(0,0,200px) 表示z轴向前移动二楼200px(近大远小的原理)

 translate3d 里面分别表示x轴距离 y轴距离 和z轴距离

 要想实现3d效果必须要在父元素上加上一个属性perspective

如果想让子元素有3d的效果 必须要给父元素设置transform-style,默认值是flat, 想变成3d效果要把值设置成preserve-3d

也可以 设置旋转后的div的上下位置,在.b:hover里面加上transform-origin:top/bottom/left/right

CSS3 animation动画

1、@keyframes 定义关键帧动画

2、animation-name 动画名称

3、animation-duration 动画时间

4、animation-timing-function 动画曲线

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

steps 动画步数

5、animation-delay 动画延迟

6、animation-iteration-count 动画播放次数 n|infinite

7、animation-direction

normal 默认动画结束不返回

Alternate 动画结束后返回

8、animation-play-state 动画状态

paused 停止

running 运动

9、animation-fill-mode 动画前后的状态

none 不改变默认行为

forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)

both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction同时设置多个属性

举例 等待条:

效果:

把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了,具体的democan参见demo。

循环动画由几幅画面构成,要根据动作的循环规律确定。但是,只有三张以上的画面才能产生循环变化效果,两幅画面只能起到晃动的效果。

在循环动画中有一种特殊情况,就是反向循环。比如鞠躬的过程,可以只制作弯腰动作的画面,因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法,可以减轻工作量,大大提高工作效率。因此在动画制作中,要养成使用循环动画的习惯。

物体的变化,可以分解为连续重复而有规律的变化。因此在动画制作中,可以尽制作几幅画面,然后像走马灯一样重复循环使用,长时间播放,这就是循环动画。

动画中的常用方法:

动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑,鸟飞翔,轮子的转动,机械运动以及有规律的曲线运动、圆周运动等等,都可以采用循环动画。

但事情总是一分为二的,循环动画的不足之处就是动作比较死板,缺少变化。为此,长时间的循环动画,应该进一步采用多套循环动画的方式进行处理。