关于css3过渡、动画、变换的新特性

过渡

css3 添加了很多新特性，这里，对过渡、动画、2d变换 加粗样式进行小结。
在浏览器中，过渡效果一般是由浏览器直接改变元素的css属性实现。
过渡使用也有一定范围，比如在最开始页面加载时浏览器不会应用过渡，而是直接反映的时没有过渡的样式。在后期触发后才会有过渡的效果出现。

过渡属性

• transition-property 指定应用过渡的属性，值用字符串表示。
• transition-duration 指定过渡一次周期时间，值用时间表示。
• transition-timing-Function 指定过渡动画的运动曲线，默认为ease。
• transition-delay 指定过渡开始之前的延迟时间，值用时间表示。
• transition 上面的缩写，格式如下：
  transition: (transition-property) (transition-duration) (transition-timing-Function) (transition-delay)

过渡提示

• 什么是指定过渡？
  就是在过渡周期中，需要改变的css样式，比如 background-color,padding,color,width…
  其实，如果transform:rotate(360deg);可以使用
  transition-property:transform。这是很神奇的应用。

• 什么是过渡曲线？
  就是在过渡周期中，过渡 “运动效果” 呈现的速度。
  默认值为ease, (first) 慢 —> (medium) 快 —> (end) 慢；
  个人建议使用 linear(匀速)。

• 注意：建议在主流浏览器中使用带有厂商前缀。

  • 在safari 浏览器： -o 或 -webkit-transition-furation:0.3s;
  • 在Chrome 浏览器: -webkit-transition-furation:0.3s;
  • 在firefox 浏览器：-moz-transition-furation:0.3s;
    有时候我们在hover中给标签添加过渡，结果开始好好的，一旦移开过渡效果立即变回原来的样式，极大影响美感。这个问题该怎样解决呢？

使用反向过渡

由于在页面中过渡常被局部使用，效果往往时平缓平滑的。那是因为在过渡中使用了反向过渡。即常见的过渡几乎是成对出现的。中间的平滑平缓效果使用的是延时和过渡周期。

.box{
    -webkit-transition-delay:150ms;
    -webkit-transition-duration:300ms;
}
.box:hover{
    width: 400px;
    -wbkit-transition-propety:width;
    -webkit-transition-delay:150ms;
    -webkit-transition-duration:300ms;
}

动画

什么是动画？动画就是使用css让元素发生位置、方向、颜色、大小、运动快慢等由原来的初始状态变为设置后的默认状态。
不是过渡吗？有啥区别？
区别就是css动画本质上是增强的过渡。在过渡中，只有开始状态和结束状态，而动画，不好意思，过渡有的动画全有，而动画有的过渡没有。
来，上干货了。

动画的属性

• animation-delay 设置动画的延迟时间，值为时间
• animation-duration 设置动画的一次完整运动周期，值为时间
• animation-timing-Function 设置动画的运动曲线
  上面是不是很熟悉？没错，和过渡没有区别，真正的区别现在开始了。
• animation-name 设置动画的名称
• animation-direction 设置动画该整个周期运动的方向，值为normal alternate
• animation-iteration-count 设置动画的播放次数，值为 正整数 、infinite
• animation-play-state 设置动画是否允许暂停和重新播放，值为running paused
• -webkit-animation-fill-mode: both; 设置动画的结束状态,值为none both forwards
• animation 设置动画的简写，属性的格式如下：
  animation： （animation-name） (animation-duration) (animation-timing-Function) (animation-delay) (animation-direction-count)

动画的提示

• animation-direction 的值为normal 或者是 alternate
  normal 每次重复都向前播放，如果可重复播放多次，每次动画都恢复初始状态，从头开始播放
  alternate 动画先向前播放，然后反方向播放。当然，这个和预定播放次数有关

• 动画和过渡相比，动画的一个优势是可以将动画应用到页面的初始布局,一旦页面加载完成，动画就会发生，而过渡只有等触发才能完成等。

• 动画可以重用关键帧@keyframes xxx(动画名)，也就是在多个选择器中添加相同动画。

如何生成动画效果

动画由两部分定义组成，第一部分包含在样式声明中，第二部分包含动画运动的属性变化。
上述动画的属性是在style 中声明在css选择器样式中，只是声明了动画的样式，却缺少动画变化过程中哪些属性是需要变化的，上面并没有交待。所有，这时候我们就会有了第二部分-----动画创建、定义应用动画的属性。绕口不？再细些。
一个动画的完成需要两部分组成。第一部分为动画的声明样式（规则），声明该动画的周期时长、速度快慢、运动暂停状态等。而第二部分就是为了结合 动画的声明样式（第一部分），来创建动画的运动时的样式属性变化，如background-color：red、color:blue、width:400px等的表现样式。现在是否清晰了些？
其实这时候你就会问：为什么不一起写，这样就不用分开岂不是更明白？
其实这个问题很简单，如果一个动画上面有多个重复的样式，而下面又有一个兄弟等着用几乎一模一样的动画样式，这个兄弟过后，你以为差不多了，结果一回头，猛然发现还有一批人等着呢，而他们的需求有相同的，又有不同的，这时后动画被分成两部分这个思想是多么的明智。

创建动画

在上述的动画属性中给了动画的规则，接下来就是动画的定义应用属性。
使用 @keyframes 关键帧创建动画。

    @keyframes XXX(动画名称){
        form(动画的初始状态){
            初始样式
        }
        to(动画的结束状态){
            结束样式
        }
    }

或者是这样：

.box{
    animation xxx(动画名);
}

    @keyframes xxx（动画名）{
        0%{
            初始样式
        }
        25%{
            当周期时间走到 25% 的时候的样式
        }
        100%{
            结束样式
        }
    }

其中，to{} 和 100% 必须要有意义值，同时，动画名要一致。
在动画中，必不可少的是属性是：
animation-name 、animation-furation 、 @keyframes xxx(动画名){ to{ } }

• 提示：在动画的声明中，可以添加多个已经创建的动画名，但如果发生动画属性重复，后面的流会覆盖前面的相同样式属性的值。

变换

变换的关键字为transform,何为变换？它是 什么？
变换就是一种为 元素应用 的 动画效果，这个属性的值是一组预定义的函数。
它很抽象，就是我们口中所说的2D 3D效果。

变换属性

先说2D的transform属性，在下列的属性值中都有两个值，分别是X轴上的值 和 Y轴上的值。

• transform: translate() 在水平方向、垂直方向平移参数单位个位置

• transform: translateX() 在水平方向上移动参数单位个位置

• transform: translateY() 在垂直方向上移动参数单位个位置

• transform: rotate（） 相对于屏幕的旋转角度，正值为顺时针，负值为逆时针

• transfrom: scale() 在水平方向、垂直方向缩放倍数，负值无效

• transform: scaleX()

• transform: scaleY()

• transform:skew() 在X轴，Y轴旋转的参数角度，记住，沿着x轴、和y轴旋转

• skewX()

• skewY()
  以上就是常见的2D动画变换的属性值，还有些特殊的，

• matrix() 指定自定义变换，

• 建议网址[变换属性 matrix() 更详细的描述]https://blog.csdn.net/weixin_42103959/article/details/81044389

• -moz-transform-origin:(left center right) (top center bottom) 指定应用变换的起点，默认就是中心点。

• 注意：在应用中，往往结合过渡和动画实现更好的复杂效果。