animation动画不生效_css过渡，动画和变换

过渡：

过渡效果一般是由浏览器直接改变元素的css属性实现的，例如：使用:hover选择器，一旦用户将鼠标悬停在元素之上，浏览器就会应用跟选择器关联的属性。当用户鼠标悬停在指定元素之上的时候，浏览器就会响应，直接应用新的属性值。

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

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

过渡/反向过渡 效果一览

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

动画：

CSS动画本质上是增强的过渡。在如何从一种css样式过渡到另一种样式的过程中，可以具有更多选择和更多控制以及更多灵活性。动画主要有以下几个属性：

1. animation-delay：设置动画开始前的延迟
2. animation-direction：设置动画循环播放的时候是否反向播放
3. animation-duration：设置动画播放的持续时间
4. animation-iteration-count：设置动画的播放次数
5. animation-name：指定动画名称
6. animation-play-state：允许动画暂停和重新播放
7. animation-timing-function：指定如何计算中间动画值
8. 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动画的一个局限是关键帧为属性定义的值只能在动画中应用，动画借宿后动画元素的外观回到初始状态，若想让元素的外观保留动画结束时的状态，必须使用过渡；而和多读相比，动画的一个优势是你可以将其应用到页面的初始布局

使用变换：

transform属性为元素应用变换，这个属性允许的值是一组预定义的函数：

1. translate：在水平方向，垂直方向或者两个方向上平移元素（translateX，translateY）
2. scale：在水平方向，垂直方向或者两个方向上缩放元素（scaleX，scaleY）
3. rotate：旋转元素
4. skew：在水平方向，垂直方向或者两个方向上使元素倾斜一定的角度
5. matrix：指定自定义变换。

transform:translate(35px,0px)平移效果

transform:rotate(15deg)旋转效果

transform:scale(1.5)比例缩放效果

transform:skew(0deg,15deg)倾斜效果

注：若transform：rotate()和transform：skew()设置得当，可以达到同样的效果；skew通过二参设置可以看成是（以正中心的x轴线，上下两边的元素以顺时针的比例左右不等距离的相对移动），一参设置（以正中心的y轴线，左右两边的元素以顺时针的比例上下不等距离的相对移动）；trnasform则是整个节点围绕其中心点旋转。设置节点宽度之后效果则较明显

transform-origin：属性指定应用变换的起点，默认情况下，使用元素的中心作为起点。

1. <%> 指定元素x轴或者y轴的起点
2. <长度值> 指定距离
3. left，center，right 指定x轴上的位置
4. top，center，bottom指定y轴上的位置

transform-origin:15% 0%起点效果预览

将变换作为动画和过渡处理

transform:rotate(360deg);transition-duration:1000ms效果预览