CSS

CSS3动画入门

CSS3动画入门

Posted by limantang on September 10, 2019

CSS动画入门

  1. 几个容易混淆的CSS属性

    属性 含义
    animation(动画) 用于设置动画属性, 这是一个简写的属性, 包含6个属性
    transition(过渡) 用于设置元素的过渡样式, 和animation有着类似的效果, 但是细节上有很大不同
    transform(变形) 用于设置元素进行旋转, 缩放, 移动, 和设置样式的动画并没有什么关系, 就相当于color一样,用来设置元素的外表
    translate(移动) translate只是transform的一个属性值
  2. transition

    什么叫过渡, 其实就是同一个属性从一个值过渡到这个属性的另一个值, 比如color从red过渡到green

    这是一个状态的转变,需要一种条件来触发这种转变

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>transition</title>
      <style>
        #box {
          height: 100px;
          width: 100px;
          background: green;
          transition: transform 1s ease-in 1s;
        }
       
        #box:hover {
          transform: rotate(180deg) scale(.5, .5);
        }
      </style>
    </head>
    <body>
      <div id="box"></div>
    </body>
    </html>
    

    当鼠标悬浮到元素时, 元素的transform发生变化, 这是就触发了transition, 产生了动画, 鼠标离开时又发生变化, 这时还是会触发transition, 这种动画的特点就是需要一个驱动力去触发, 这种方式有以下几个不足

    • 需要事件触发
    • 是一次性的, 除非重复触发
    • 只能定义开始结束状态, 不能定义中间状态, 也就是说只有两个状态
    • 一条transition规则, 只能定义一个属性的变化

    语法:transition: property duration timing-function delay

    描述
    property 设置过渡效果CSS属性名称
    duration 规定完成过渡效果需要多少时间
    timing-function 规定速度效果的速度曲线
    delay 定义过渡效果何时开始
  3. animation

    这个属性是transition属性的拓展, 弥补了transition的很多不足, 并且操作性更强

    <!DOCTYPE html>
    <html lang="en">
       
    <head>
      <title>animation</title>
      <style>
        .box {
          height: 100px;
          width: 100px;
          border: 15px solid black;
          animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
        }
       
        .box:hover {
          animation-play-state: paused;
        }
       
        @keyframes changebox {
          10% {
            background: red;
          }
          50% {
            width: 80px;
          }
          70% {
            border: 15px solid yellow;
          }
          100% {
            width: 180px;
            height: 180px;
          }
        }
      </style>
    </head>
       
    <body>
      <div class="box"></div>
    </body>
       
    </html>
    

    看一下keyframes这个关键点, 它定义了一个动画的组合叫做changebox, 里面的百分比代表了不同时间点的属性值

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

    描述
    name 用来调用@keyframes定义好的动画
    duration 制定元素播放动画所持续的时间
    timing-function 规定效果的速度曲线
    delay 定动画开始之前的等待时间
    Iteration-count 定义动画的播放次数
    direction 设置动画播放方向
    play-state 控制元素动画的播放状态, pause running
    fill-mode 控制动画结束后元素的样式