web动画效果的呈现

        过渡：就是指元素从一个状态变为另一个状态的过程。通过transition 属性来指定。
它的语法格式为：
1.transition: 过渡属性，持续时间，运动曲线，延迟时间。
2.transition-property：指定要用于过渡的属性名称，如：width、height、background、......
3.transition-duration：过渡持续时间，单位是秒。
4.transition-timing-function：过渡的的运行曲线，默认是 ease。
5.transition-delay：延迟执行时间，单位为秒。
如：transition-property: left;
       transition-duration: 2s;
       transition-timing-function: ease;
       transition-delay: 0s;
如果希望元素的多个属性都具有过渡的效果，就可以把过渡属性的值设置为 all 。
如： transition: all 2s linear;
运动曲线可以分为以下几种：
ease：默认值，逐渐慢下来
linear：匀速运动
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速

       进度条的效果：可以使用过渡实现transition: width 1s ease-out;
 
       转换之移动：元素转换的操作功能，通过使用 transform 来实现，可以实现元素的位移、旋转和缩放。
1- 位移：transform: translate()
2- 旋转：transform: rotate()
3- 缩放：transform: scale()
使用 translate() 来进行指定，它需要通过 x坐标和 y坐标来确定移动的位置。
它的语法格式有：
transform: translate(x, y); // 在x坐标和 y坐标上移动
transform: translateX(n); // 只在x坐标上移动
transform: translateY(n); // 只在y坐标上移动
如：transform: translate(50px, 100px);
当使用translate(x, y)时，x和y都可以指定正值或负值，方向与盒子模型相同。
 
       转换之旋转：通过使用 rotate() 来实现，进行旋转时需要指定旋转的角度。而所使用的角度的单位是deg。
它的语法格式为：
transform: rotate(数字deg);
如：transform: rotate(45deg);
 
       旋转中心点：使用div:before {...
                                       transition: all .5s ease;
                                  }
                                  div:hover:before {
                                      transform: rotate(0deg);
                                  }

       转换之缩放：缩放使用 transform: scale() 来实现，
语法格式为：
transform: scale(x, y)
x和y的取值说明：
如果值为 1 表示不放大也不缩小
如果值大于 1 表示放大
如果值小于 1 表示缩小
如：
1- transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
2- transform:scale(2,2) ：宽和高都放大了2倍
3- transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
4- transform:scale(0.5, 0.5)：缩小

       动画：使用动画之前，需要通过 @keyframe 来定义动画，定义好动画后，通过 animation 属性来指定动画名称。它和过度最大的区别是：动画可以实现更多变化，更多控制，连续自动播放等效果。要想使用动画，那么首先浏览器必须是高版本的。
定义动画时，需要告诉它这个动画将如何完成。
1. 开始状态 from ，也可以使用 % 百分比来指定
2. 结束状态 to
 animation是动画的简写方式，它里面有很多的属性。它的语法格式为：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
a、动画的名称 -- animation-name:
b、持续时间 -- animation-duration:
c、动画曲线 -- animation-timing-function:
d、延迟时间 -- animation-delay:
e、是否可以逆向播放 -- animation-direction:
注：默认是“normal“,动画执行到最后会直接加到开始处
alternate逆播放，动画执行到最后会反着播放。
f、动画执行总人数 -- animation-iteration-count:
注：次数可以是整数，也可以是 infinite 表示一直循环
g、动画的状态 -- animation-fill-mode:
注：有两个值可以指定：保持forwards，回到起始backwards
h、规定动画是否正在运行或暂停 -- animation-play-state:
注：这个需要单独使用，有两个值：
1.running: 运行状态，默认值
2.paused: 暂停状态
如：@keyframes move {
            /*from {
                left: 10px;
            }
            to {
                left: 100px;
            }*/
            0% {
                left: 10px;
            }
            100% {
                left: 400px;
            }
        }
opacity: 1;指定透明度，0，完全透明，1，完全不透明
        设置地图坐标点：
@keyframes pusle {
            0% {

            }
            70% {
                width: 40px;
                height: 40px;
                opacity: 1;//透明度设置
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;//完全透明
            }
        }

       3D效果：使用transform-style: preserve-3d;让背面的盒子保留立体空间，给父级添加效果
transform: rotateY(180deg);//通过y轴进行旋转，旋转为180°
transform: rotateX(90deg);//通过x轴进行旋转，旋转角度为90°
transform: translateZ(17.5px);//位移z轴方向17.5px
注：如果有移动或者其他样式，必须先写移动
transform: rotateY(60deg) translateZ(300px);//这是先旋转好了再移动距离，运用多个可呈现旋转木马的效果。