CSS动画: animation和transition

注意：最近做一个弹框效果：要求弹框从下面渐变（opacity）弹出：

但是页面加载成功后没有这个渐变过程，弹框是已加载后就存在了，感觉transition没起作用

原因：transition触发需要操作，不能自动触发

解决：添加触发条件，若是页面加载自动触发可考虑animation

 

一、transition： 

1、语法：transition{ transition-property  transition-duration  transition-timing-function  transition-delay}

transition-property：是用来指定当元素其中一个属性改变时执行transition效果，值有none（没有属性改变）、all（默认值，所有属性改变），indent（某个属性名，一条transition规则，只能定义

一个属性的变化，不能涉及多个属性，如果要设置多个属性时，需分别设置，中间以逗号隔开）【当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果。          

transition-duration ：过渡时间，是用来指定元素转换过程的持续时间，单位为s（秒）或ms（毫秒）

transition-timing-function：时间函数，允许你根据时间的推进去改变属性值的变换速率，值ease（逐渐变慢）、linear（匀速）、ease-in(加速) 、ease-out（减速）、ease-in-out：（加速然后减速）、cubic-bezier：（该值允许你去自定义一个时间曲线）     贝塞尔曲线扫盲    工具网站

transition-delay：延迟，指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，单位为s（秒）或ms（毫秒）

2 、触发方式

　　伪类触发：:hover : focus  :checked  :active

　　js触发：toggleClass

3、以下情况下，属性值改变不能产生过渡效果

1. background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等，浏览器支持情况
2. float浮动元素
3. height或width使用auto值
4. display属性在none和其他值（block、inline-block、inline）之间变换
5. position在static和absolute之间变换

4、transition位置：

 
BOX1

 样式：

//样式一：


//样式二

样式一：当鼠标在div上悬停，div的样式从原始样式过渡到div：hover的样式；当鼠标离开div，样式又从div：hover过渡到div默认样式。这两个方向上的过渡都是平滑不突兀的

样式二：当鼠标在div上悬停，div的样式从原始样式过渡到div：hover的样式；当鼠标离开div，样式会从div：hover的样式回到原始样式，但不是过渡动画的方式，而是直接回到原始样式，看上去比较突兀和生硬。

如上：样式一盒样式二transition的位置，应该使用样式一的transition位置，才能实现动画的平滑过渡

 二、animation

//其中0%和100%还可以使用关键词from和to来代表
@keyframes changebox {
    10% {  background:red;  }
    50% {  width:80px;  }
    70% {  border:15px solid yellow;  }            
    100% {  width:180px;  height:180px;  }
}

使用： animation: changebox 10s ease-in-out 3 alternate paused;

上面动画执行分析：

特别注意的是：每一个百分号后面的样式变化都是从0s开始的，除非有两个百分比设置了同一个样式的变化（上方的例子，50% {  width:80px;  }  100%{width:150px;}，那么宽度的整体情况会是0~5s中宽

度由原始值变为80px；5~10s间，宽度由80px变为180px；），个人理解，在这个过程中，不是一个动画，而是多个小动画（自己起的名字，方便后面区分animation）按照设定好的百分比对应的时间正好执行完成结

同一时间内有可能有多个小动画同时在执行，也有可能只有一个小动画在执行。

语法：animation: name duration timing-function delay iteration-count direction;

animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致

animation-duration ：指定元素播放动画所持续的时间

animatino-timing-function ： 和transition中的transition-timing-function 中的值一样。根据上面@keframes中分析的animation中可能存在多个小动画，因此这里的值设置是针对每一个小动画所在时间范围内的属性变换速率。

animation-delay：定义在浏览器开始执行动画之前等待的时间，这里是指整个animation执行之前的等待时间，而不是上面说的多个小动画

animation-iteration-count：定义动画的播放次数，其通常为整数，默认是1,；取值为infinite，动画将无限次的播放。

animation-direction：主要用来设置动画播放方向，其主要有两个值：

• • • normal 默认值，如果设置为normal时，动画每次循环都是向前（即按顺序）播放
    • alternate（轮流），动画播放在第偶数次向前播放，第奇数次向反方向播放（animation-iteration-count取值大于1时设置有效）

animtion-play-state：属性是用来控制元素动画的播放状态。其主要有两个值：

• • • running，可以通过该值将暂停的动画重新播放，这里的重新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放。
    • paused，暂停播放

注意：使用animtion-play-state属性，当元素动画结束后，元素的样式将回到最原始设置状态（这也是为什么要引入animation-fill-mode属性的原因）

animation-fill-mod：　默认情况下，动画结束后，元素的样式将回到起始状态，animation-fill-mode属性可以控制动画结束后元素的样式。主要具有四个属性值：

• • • none（默认，回到动画没开始时的状态。）
    • forwards（动画结束后动画停留在结束状态）
    • backwords（动画回到第一帧的状态）
    • both（根据animation-direction轮流应用forwards和backwards规则）。