移动web第二天 动画

1.动画：animation

使用步骤：

​ （1）定义动画 如果一个动画系列里没有CSS代码，这个动画序列就可以不写

​ 每一个动画序列都是单独的，都是相对于最开始的动画样式，不是相对于上一个动画序列

​

@keyframes identifier（动画的名字） {

        	0% {   动画开始的状态       百分数相对的是整体动画的时间，按百分比分配

        		}

        		100% {         动画结束的状态

        		}

     		 }

（2）调用动画

​ animation-name:动画名字；

​ animation-duration：时间； 动画的持续时间

动画序列：分状态，按一个个状态来设置每个状态的动画效果

2.动画属性

animation-duration：时间； 动画的持续时间

animation-timing-funtion：ease；默认值，先加速，后以低速结束 linear：匀速 steps：步数，就是分几步来完成动画 贝塞尔曲线

animation-delay：时间； 动画从何时开始

animation-iteration-count：infiniite；动画重复次数 infinite是无限的意思

animation-direction：alternate；是否反方向播放，默认的是normal，如果反方向播放就是aternate；

animation-fill-mode：forwords；动画执行完毕后的状态，默认是backwards，结束了让他停留在动画百分之百的样式上，就是forwards

annimation-play-state：puased；暂停动画 经常和鼠标经过等其他配合使用 不能写在动画连写属性中

动画属性连写：animation：name duration time-funtion delay iteration-count dircetion fill-mode;

3.3D转换

​ X轴，Y轴，Z轴

​ transform：translateX（px）; 沿X轴移动

​ transform：translateY（px）; 沿Y轴移动

​ transform：translateZ（px）; 沿Z轴移动 z轴不能使用百分数

​ transform：translate3d（X,Y,Z）; 里面是xyz的值 里面的xyz值是不能省略的，如果没有就写0

​ 透视：perspective 近大远小 就是一种距离，就是人的眼睛到页面的距离 写到被观察元素的父盒子上 z轴越大，看的越大

4.3D旋转

​ X轴，Y轴，Z轴

​ transform：rotateX（px）; 沿X轴旋转 左手准则判断，左手的大拇指指向X轴的正方向，其余手指弯曲的方向就是旋转方向

​ transform：rotateY（px）; 沿Y轴旋转 同理由左手准则判断，大拇指方向指向Y轴的正方向

​ transform：rotateZ（px）; 沿Z轴旋转 和2D旋转效果差不多

​ transform：translate3d（X,Y,Z，deg）; 里面是xyz的值，值是0-1之间的数字 沿X轴旋转45度就是transform：translate3d（1,0,0,45deg）;

5.3D呈现transform-style

​ 控制子元素是否开启三维立体环境 代码要写给父盒子，但是影响的是子盒子 很重要

​ transform-style：flat；默认的 子元素不开启3D立体空间

​ transform-style：preserve-3d；子元素开启立体空间

走马灯效果，要在一组图片后再加一组图片，用户看到的和切换后得是一样的，但是已经切换过了，切换的非常快

同一个动画如何让频率不同，第一个让动画的持续时间不同，第二种让延迟时间不同