web动画的基本实现

1.过渡动画（transition）

               ①简写：transition：过渡参数  过渡时间   速度曲线  延迟时间，（多个过渡的属性变化使用逗号隔开），如果多个属性动画是一样的可以简写：transition:all 2s linear 1s

               ②分开写：transition-property:过渡属性   transition-duration:过渡持续时间 transition-timing-funcition:过渡曲线（linear匀速  ease:减速  ease-in加速  ease-out减速 ease-in-out先加速后减速） transition-delay:过渡延时

2.位移动画（transfrom）

              transfrom:scale(x轴缩放，y轴缩放) 缩放动画   translate:(x轴平移，y轴平移）平移动画  rotate（旋转角度）旋转动画

3.animation动画

              animation: 动画名称 持续时间（normal动画按正常播放。 reverse动画反向播放    alternate动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。   alternate-reverse动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。     initial设置该属性为它的默认值。     inherit从父元素继承该属性。） 执行次数（n指定一个数字表示多少次     infinite指定动画应该播放无限次（永远）） 是否反向 运动曲线（linear动画从头到尾的速度是相同的    ease默认。动画以低速开始，然后加快，在结束前变慢。 ease-in动画以低速开始。ease-out动画以低速结束  ease-in-out动画以低速开始和结束） 延迟执行

               例：

animation: move （动画名称）1s（时间 ） alter（次数）nate（反向 ） linear（运动曲线） 3 （延迟执行）;

@keyframes move {

from{

       transform: translateX(0px) rotate(0deg) ;

}

to{

   transform: translateX(500px) rotate(555deg) ;

}

}

4.3d转换动画

例：

旋转动画

.rote{

transition: transform 2s;

}

.rote:hover{

//transform: rotateX(360deg);

//transform: rotateY(360deg);

transform: rotateZ(360deg);

}

平移动画

.box{

transition:all 1s;

}

.box:hover{

//transform:translateX(300px);

//transform:translateY(300px);

transform:translateZ(300px);

}

5.skew(xdeg,ydeg);用于斜拉变换。

第一个参数x的转换角度，第二个是y的转换角度