过渡与动画

过渡

transition过渡属性是CSS3浓墨重彩的特性,过渡可以为一个元素在不同样式之间变化自动添加“补间动画"

兼容性

  • 过渡从IE10开始兼容,移动端兼容良好
  • 曾几何时,网页上的动画特效基本都是由 Javascript定时器实现的,现在逐步改为使用CSS3过渡
  • 优点:动画更细腻,内存开销小

基本使用

transition: width 1s linear 0s

参数

1:什么属性要过渡 2:动画时长 3:变化速度曲线 4:延迟时间

  • 如果要所有属性都参与过渡,可以写all
  • transition的第三个参数就是缓动参数,也是变化速度曲线
  • 网站https://cubic-bezier.com/可以生成贝塞尔曲线,可以自定义动画缓动参数
transition: all 1s cubic-bezier(.46,1.02,.49,-0.86) 0s;

哪些属性可以参与过渡

  • 所有数值类型的属性,都可以参与过渡,比如 Width、 height、1eft、top、 border- radius、 opacity
  • 背景颜色和文字颜色都可以被过渡
  • 所有变形(包括2D和3D)都能被过渡

注意项

最好设置初始状态

部分需要过渡的属性,如果不设置初始状态,会没有过渡效果
以left值为例,当不设置left的初始值时

         .box{
            width: 100px;
            height: 100px;
            position: relative;
            background-color: black;
            <!----设置初始状态>
            left:0;
            transition: all 1s linear 0s;
         }
         .box:hover{
            left:200px
         }

过渡要定义在元素的开始状态上,而不是结束状态上

动画

动画的定义和调用

  • 可以使用@ keyframes来定义动画, keyframes表示“关键帧”,在项目上线前,要补上@- webkit-这样的私有前缀
        @keyframes r {
            from {
                transform:rotate(0)
            }
            to{
                transform: rotate(360deg);
            }
        }
  • 定义动画之后,就可以使用 animation属性调用动画
animation: r 1s linear 0s 1;

从左到右:动画名称,总时长,缓动效果,延迟,执行次数

  • 第五个参数就是动画的执行次数,如果想永远执行可以写 infinite

alternate和forwards

  • 如果想让动画的第2、4、6…(偶数次)自动逆向执行,那么要加上alternate参数即可
  • 如果想让动画停止在最后结束状态,那么要加上 forwards

多关键帧动画

      @keyframes bgColor {
       0% {
           background-color: rgb(219, 157, 157);
       }
       20% {
           background-color: rgb(1, 19, 34);
       }
       40% {
           background-color: rgb(94, 255, 0);
       }
       60% {
           background-color: rgb(0, 17, 255);
       }
       80% {
           background-color: rgb(217, 255, 0);
       }
       100% {
           background-color: rgb(234, 0, 255);
       }
        }

Animate.css

过渡与动画的对比

transition过渡

  • 令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果;
  • 触发条件:需要触发一个事件,比如鼠标触发等。
  • 精确性:只能设定头尾,设置过渡属性没有中间的过程,动画是一步到位。
  • 循环:只能触发一次,不能产生重复发生动画。

animation动画

  • 可设置多个关键帧,实现自由动画。
  • 触发条件:不需要触发任何事件也可随时间变化达到一种动画效果。
  • 精确性:支持多帧动画效果,可绘制复杂动画。
  • 循环:可以反复执行动画,支持正向逆向及交替运行。

应用场景分析

transition过渡

如果要简单的from to 效果,用 transition。比如简单的按钮动画。

animation动画:

如果要灵活定制多个帧以及循环,用animation。比如变色效果。

最后修改:2021 年 07 月 28 日 12 : 15 AM