CSS过渡与动画

Posted 2023-04-27

参考技术A 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果，比如 :hover 、 :active 或者通过js改变状态。

动画包含两部分，描述动画的样式规则和指定动画开始、结束和中间过程样式的关键帧。

关于动画事件，点击 此处 了解更多。

CSS3过渡与动画

一、CSS3 过渡

• transition-property

　　　规定过渡效果的 CSS 属性名

   -webkit-transition-property: none / all / property;
      -moz-transition-property: none / all / property;
       -ms-transition-property: none / all / property;
        -o-transition-property: none / all / property;
           transition-property: none / all / property;

/*参数说明
- none
- all，默认值
- property(CSS属性名) 例如color、opacity...*/

 

• transition-duration

　　　规定完成过渡效果需要多少时间

transition-duration: time;

/*参数说明
- 规定完成过渡效果需要花费的时间（以秒或毫秒计）
- 默认值是 0*/

 

• transition-timing-function

　　　规定速度效果的速度曲线

transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out
                            step-start / step-end / steps(<integer>, [ start / end ]) 
                            cubic-bezier(<number>, <number>, <number>, <number>);

/*参数说明
− linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

− ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果）

− step-start：等同于 steps(1, start)
− step-end：等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数
                                         第一个参数：必须为正整数，指定函数的步数
                                         第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
                                         第二个参数：可选，默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>)：
  特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/

 

• transition-delay

　　　定义过渡效果何时开始

transition-delay: time;

/*参数说明
- 指定秒或毫秒数之前要等待切换效果开始
- 默认值是 0*/

 

 

• transition复合写法

transition: property duration timing-function delay;

 

• 实际应用

div

    width:100px;
    height:75px;
    background:#0b2632;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:ease-in-out;
    transition-delay:0.5s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:0.5s;


div:hover

    width:200px;

 

二、CSS3 动画

• Keyframes

　　　关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置

@keyframes animationname 
   keyframes-selector 
       css-styles;
   


/*参数说明
 animationname：必写项，定义animation的名称
 keyframes-selector：必写项，动画持续时间的百分比，0-100%、from (0%)、to (100%)
 css-styles：必写项，一个或多个合法的CSS样式属性
 @keyframes animationname在style中单独写入
*/

 

• animation-name

　　　规定需要绑定到选择器的 keyframe 名称

animation-name: keyframename / none;

/*参数说明
 keyframename：指定要绑定到选择器的关键帧的名称；
 none：指定有没有动画（可用于覆盖从级联的动画）
*/

 

• animation-duration

　　　规定完成动画所花费的时间，以秒或毫秒计

animation-duration: time;

/*参数说明
 time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果
*/

 

• animation-timing-function

　　　规定动画的速度曲线

animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out
                            step-start / step-end / steps(<integer>, [ start / end ]) 
                            cubic-bezier(<number>, <number>, <number>, <number>);

/*参数说明
− linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

− ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果）

− step-start：等同于 steps(1, start)
− step-end：等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数
                                         第一个参数：必须为正整数，指定函数的步数
                                         第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
                                         第二个参数：可选，默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>)：
  特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/

 

• animation-delay

　　　规定在动画开始之前的延迟

animation-delay: time;

/*参数说明
 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0
 如果值为负，则动画马上开始，但会跳过相应的时间进入动画
*/

 

• animation-iteration-count

　　　规定动画应该播放的次数

animation-iteration-count: infinite / <number>;

/*参数说明
 <number>为数字，其默认值为“1”；infinite为无限次数循环
*/

 

• animation-direction

　　　规定是否应该轮流反向播放动画

animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit;

/*参数说明
 normal：正常方向
 reverse：反方向运行
 alternate：先正后反，并持续交替运行（需依赖infinite）
 alternate-reverse：先反后正，并持续交替运行（需依赖infinite）
*/

 

• animation-fill-mode

　　　规定当动画完成或当动画有延迟未开始播放时，要应用到元素的样式

animation-fill-mode: none / forwards / backwards / both / initial / inherit;

/*参数说明
 none：默认值。不设置对象动画之外的状态
 forwards：设置对象状态为动画结束时的状态
 backwards：设置对象状态为动画开始时的状态
 both：设置对象状态为动画结束或开始的状态
*/

 

• animation-play-state

　　　规定动画运行或暂停

animation-play-state: paused / running;

/*参数说明
 paused：指定暂停动画
 running：默认值，指定正在运行的动画
*/

 

• animation

　　　复合写法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

/*参数说明
 默认写在前面的时间为duration
*/

 

• will-change

　　　增强页面渲染性能，提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置

will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>;

/*参数说明
 auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化
 scroll-position：表示将要改变元素的滚动位置
 contents：表示将要改变元素的内容
 <custom-ident>：明确指定将要改变的属性与给定的名称
 <animateable-feature>：可动画的一些特征值，比如left、top、margin等
*/


兼容性：IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+

 

• 实际应用

div

    width:100px;
    height:100px;
    background:black;

    
div:hover

            animation:myfirst 5s;
         -o-animation:myfirst 5s; /* Opera */
       -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */


@keyframes myfirst

    0%   background:black;
    25%  background:blue;
    50%  background:red;
    100% background:white;


@-moz-keyframes myfirst /* Firefox */

    0%   background:red;
    25%  background:yellow;
    50%  background:blue;
    100% background:green;


@-webkit-keyframes myfirst /* Safari and Chrome */

    0%   background:red;
    25%  background:yellow;
    50%  background:blue;
    100% background:green;


@-o-keyframes myfirst /* Opera */

    0%   background:red;
    25%  background:yellow;
    50%  background:blue;
    100% background:green;