CSS 动画

发表评论
CSS可设置元素更多的动画效果

步骤1 @keyframes 定义动画样式 和 名称

// 顺序可用from {} to {} 或 百分比 0%{} 100%{}

@keyframes move {
     /* 初始位置 */
      0% {
          transform: translateX(0px);
      }
      /* 基于初始位置向右移动500px */
      100% {
          transform: translateX(500px);
      }
  }

步骤2 animation-name 引入动画样式

/* 引入该动画:动画名称 */
animation-name: move;

步骤3 animation-duration 设置动画播放时间

 /* 持续时间 5s */
 animation-duration: 5s;

动画的常用属性

属性 描述
@keyframes 规定动画
animation 所有动画数学简写属性，除了animation-play-state属性
animation-name *规定@keyframes动画的名称
animation-duration *规定动画完成一个周期所花费的秒或毫秒，默认是0
animation-delay 规定动画何时开始，默认为0
animation-timing-function 动画速度曲线
linear(匀速) ease(默认值 初慢渐快尾慢) ease-in(从慢开始) ease-out(由慢结束) ease-in-out(低速开始和结束) steps()(指定了时间函数中的间距数量(步长))
animation-iteration-count 规定动画被播放的次数(默认为1)。如infinite
animation-direction 规定动画是否在下一周期逆向播放(alternate)，默认是“normal”。
animation-play-state 规定动画是否正在运行或暂停。默认为“running”。“pause”暂停
animation-fill-mode 规定动画结束后状态，保持forwards;回到起始backwards

使用 animation-iteration-count:infinte 可以持续循环播放动画


使用 animation-timing-function 可以调节动画 速度曲线

animation 动画简写方式

// animation-play-state 的属性不包含在简写范围里，需要单独描述

// 动画名字 持续时间 运动速率 延时 重复次数 下周期方位(常规或逆向) 动画结束后状态;           
animation: move 2s ease 0s infinite normal forwards;

制作文字打字机效果

// 使用 animation-timing-function 的 steps() 方法，实现步骤完成动画。盒子隐藏区域长度并按照 steps() 的步骤逐渐扩大。呈现打字机效果

@keyframes SMdaziji{
 0%{
   width: 0px;
 }
   100%{
   /* 取字的宽度逐渐增加 */
   width: 225px;
 }
}
我是屎猫猫，欢迎来到无名喵站

制作中国地图热点图 锚点动画

// 将盒子持续放大，边框使用阴影，用 opacity 调节出现与消失

@keyframes pulse{
    0%{

   }
    70%{
     width: 40px;
     height: 40px;
     opacity: 1;
   }
    100%{
     width: 70px;
     height: 70px;
     opacity: 0;
   }
 }

附上案例：中国地图热点图

制作 奔跑的白熊

// 利用steps() 将固定长度的div下背景图位置进行位移 实现 播放 白熊奔跑 的 帧动画 效果
// 这种用 长图 配合 steps() 制作的动态图相比GIF，元素色彩不会缺失，而且更方便调节速率

  @keyframes bear{
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: -1600px 0;
    }
}
  @keyframes move{
    0%{
      left: 0;
    }
    100%{
      left: 50%;
      transform: translateX(-50%);
    }
}
  .bear_item{
    position: absolute;
    bottom: 10px;
    width: 200px;
    height: 100px;
    background: url(images/bear.png)no-repeat;
    /* 若需要添加多个动画，可用逗号隔开 */
    animation: bear 0.5s steps(8) infinite,move 2s linear forwards;
}

附上案例：奔跑的白熊

制作 旋转木马效果

// 先将6个盒子以不同的角度旋转(每个递增+60°)，再沿着它们的Z轴向前。形成了 中间空且不同方位展开 的效果
// 再制作动画 从rotateY(0deg) 到 rotateY(360deg) 完成一个周期，并以 匀速 linear 且无限 infinite 持续播放

section div:nth-child(1) {
  /* 第一个元素默认角度 Z轴向前移动300px */
  transform: translateZ(300px);
}
section div:nth-child(2) {
  /* 先向右旋转60° 再Z轴向前移动300px */
  transform: rotateY(60deg) translateZ(300px);
}

 section div:nth-child(3) {
   /* 先向右旋转120° 再Z轴向前移动300px */
   transform: rotateY(120deg) translateZ(300px);
}
...

附上案例：旋转木马案例

发表回复