css3动画

通过伪类触发动画效果.

animation动画写法:

前提要设定好关键帧,将动画的规则分成多份,最多可以分成100份

例如:

 

 

（1）语法

animation: name duration timing-function delay iteration-count direction fill-mode;

animation: 关键帧名  过渡时间  过渡函数  延迟时间  动画播放次数  动画播放方向  动画播放状态  动画开始之前和结束之后发生的操作

动画播放次数

值为正数，默认值为1；特殊值infinite，表示动画无限次播放

动画的播放方向

normal，动画每次都是循环向前播放         //单程播放

alternate，动画播放为偶数次则向前播放    //往返播放

forwards表示动画在结束后继续应用最后关键帧的位置

backwards表示会在向元素应用动画样式时迅速应用动画的初始帧

both表示元素动画同时具有forwards和backwards的效果

.div1 {

animation: donghua 3s linear 2s infinite alternate; }

animation: donghua 表示设定的名字

3s 表示时长

linear 表示以相同的速度

2s; 表示 延时2秒

infinite 表示循环播放

alternate表示偶数次的播放 

translate3d

 transform: translate3d(0px,0px,100px);

三个值分别代表x轴y轴和z轴,(0px,0px,100px)表示z轴视距近了100px*

transform: rotateX(100deg); 可以理解为上下翻转

transform: rotateY(30deg);可以理解为左右翻转 

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

   transform-origin: top; / bottom改变上下位置 

要实现效果必须在父元素上加上perspective

 perspective: 600px;视距 可以理解为眼睛距离物体的距离,距离越近物体就越大,反之就越小