动画与过渡的理解体悟

1.动画是使元素从一种样式逐渐变为另一种样式，这点与过渡类似，它和过度最大的区别是：动画可以实现更多变化，更多控制，连续自动播放等效果。 要想使用动画，那么首先浏览器必须是高版本的。

2.过渡是通过transition属性来定义，transition: 过渡属性 持续时间 运动曲线 延迟时间;

当然也可以分开来写。

- transition-property：指定要用于过渡的属性名称，如：width、height、background、......
- transition-duration：过渡持续时间，单位是秒。
- transition-timing-function：过渡的的运行曲线，默认是 ease
- transition-delay：延迟执行时间，单位为秒

3.动画是通过    @keyframe 来定义，通过 animation 属性来指定动画名称即animation-name: move;name后的名称可以随意指定。定义动画时，还要通过 from to来告诉它何时开始何时结束。也可以通过%来指定开始与结束。

4.动画的简写为 animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

动画的名称 -- animation-name:
持续时间 -- animation-duration:
动画曲线 -- animation-timing-function:
延迟时间 -- animation-delay:（注：此处值可以是正也可以是负，是负值则动画将开始播放，如同已播放 N 秒。）
是否可以逆向播放 -- animation-direction:默认是“normal“,动画执行到最后会直接加到开始处
alternate逆播放，动画执行到最后会反着播放。

运行次数：animation-iteration-count：   /* 使用infinite可以时动画一直运行下去*/

例子

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: move;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: 3;
    animation-direction: alternate;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
/*定义动画*/
@keyframes move {
    from{
        left: 10px;

    }
    to {
        left: 200px;
    }
    /*0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}*/

}

<div class="box"></div>

总结：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

5.转换中的移动，旋转，和缩放
- 位移：transform：translate（）
- 旋转：transform：rotate（数字deg）
- 缩放：transform：scale（x,y）（写多少就放大多少倍，只写一个参数则默认第二个参数与第一个一样）

位移的语法格式分为三种：transform：translate（x,y）;//在x坐标和 y坐标上移动
transform：translateX（n）;//只在x坐标上移动。
transform：translateY（n）;//只在y坐标上移动。
注意：后两个x和y 不能同时用，后者会覆盖前者，只会有一个有效果。要想在 x 和y 上都移动使用第一种，不能使用后两种一起。

注意：

1.当使用translate（x，y），x和y都可以指定正值或负值
如果x的值为正值，则往右移动，负值往左移动
如果y的值是正值，则往下移动，负值往上移动。
2. x和y轴的值要带单位，一般使用像素（px）