【无标题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

---

CSS过渡、变形与动画
 

过渡的定义：

 

   过渡是元素从一种样式逐渐改变为另一种的效果。

而CSS过渡特性允许我们控制应用新属性值的速度，使变换效果更为和谐。过渡主要有以下几个属性值：

transition-delay：指定过渡开始之前的延迟时间
transition-duration：指定过渡的持续时间
transition-property：指定应用过渡的属性
transition-timing-function：指定过渡期间计算中间值的方式
transition：在一条声明中指定所有过渡细节的简写属性，transition的简写属性格式如下：<property><duration><timing-function><delay>

注：当不设置transition-property的时候默认为发生变化的css属性
: 反向过渡即直接在原CSS属性上添加过渡属性即可，返回初始状态看上去就没那么突兀了
: 刚开始布局页面时浏览器不会应用过渡，这意味着开始显示时就会直接应用相关样式，之后才会通过过渡来应用新样式
 

css动画的定义：

CSS动画本质上是增强的过渡。 

  动画主要有以下几个属性：
animation-delay：设置动画开始前的延迟
animation-direction：设置动画循环播放的时候是否反向播放
animation-duration：设置动画播放的持续时间
animation-iteration-count：设置动画的播放次数
animation-name：指定动画名称
animation-play-state：允许动画暂停和重新播放
animation-timing-function：指定如何计算中间动画值
animation：简写属性，格式：<name><duration><timing-function><delay><iteration-count> 

 注：这些属性都不是用来指定要作为动画的CSS属性的。这是因为红花在两部分定义的，第一部分包含在样式声明中，它们定义了哦那规划的样式，但并没有定义哪些属性是动画。第二部分使用@key-frames规则创建，用来定义应用动画的属性。
动画效果一览
注: 动画效果animation-play-state一般不在CSS定义动画的时设为暂停模式，否则不能播 放，一般来说，此属性可能应用于javascript比较好
: 初始值-动画开始时候的状态（和原状态无关）from，50%关键帧。
: animation-direction，动画先向前播放，然后反向播放。相当于animation-iteration-count值为2，但直接设置count值2而不设置animation-direction则无法反向。
: 可在name处设置多个动画属性，用，隔开。
CSS动画的一个局限是关键帧为属性定义的值只能在动画中应用，动画借宿后动画元素的外观回到初始状态，若想让元素的外观保留动画结束时的状态，必须使用过渡；而和多读相比，动画的一个优势是你可以将其应用到页面的初始布局

1.(变形)transform的定义：

       可以向元素应用2D或3D转换，并且能够对元素进行旋转、缩放、移动、倾斜。只能转换由盒模型定位的元素。如果元素具有display: block，则由盒模型定位元素。

语法：transform: none | transform-functions；

常用值描述	描述
none	不进行转换
translate(x,y)	2D转换
translate3d(x,y,z)	3D转换
translateX(x,y)	只改变X轴的值
scale(x,y)	2D缩放转换
skew(x-angle,y-angle)	3D旋转，在参数中规定角度