动画，快到碗里来！

星河夜
142 阅读5分钟

一、前言

动画能让页面变得更生动，因此为了页面的美观，学习动画是个必不可少的过程，那么如何去写一个动画呢，让我们接着往下看吧。

二、实现方法

1、transform

  • 定义 transform属性允许你旋转，缩放，倾斜或平移给定元素。
  • 属性值 | 值 | 描述 | | --- | --- | | none | 不进行任何转换 | | matrix | 2D转换，使用6个值的矩阵 | | matrix3d | 3D转换，使用16个值的4*4矩阵 | | translate(x,y) | 2D转换，可以分开写成tanslateX(x) translateY(y) | | translate3d(x,y,z) | 3D转换，可以分开写成translateX(x) translateY(y) translateZ(z) | | scale | 2D缩放，可以分开写成scaleX(x) scaleY(y) | | scale3d | 3D缩放，可以分开写成scaleX(x) scaleY(y) scaleZ(z) | | rotate | 2D旋转，可以分开写成rotateX(x) rotateY(y) | | rotate3d | 3D旋转，可以分开写成rotateX(x) rotateY(y) rotateZ(z) | | skew | 2D倾斜，可以分开写成skewX(x) skewY(y) | | perspective | 为3D转换元素定义透视图 |

备注：matrix详解 && perspective图示

2、transition

  • 定义 transition提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。
  • 属性值 | 值 |描述 | | --- | --- | | transition-property | 指定哪个或者哪些的css属性用于过渡 | | transition-duration | 指定过度的时长，单位为秒或者毫秒 | | transition-time-function | 过渡函数，定义属性值如何变化，取值为ease(默认值，缓慢开始，然后加速，最后缓慢结束)，linear(匀速变化) ease-in(缓慢开始) ease-out(缓慢结束) ease-in-out(缓慢开始，缓慢结束) step-start(steps(1,start)) step-end(steps(1,end)) steps(int, start或者end) cubic-bezier(n,n,n,n) initial inherit | | transition-delay | 指定延迟，即属性开始变化时与过渡开始发生时之间的时长 |

备注：steps详解

  • 使用 截屏2022-06-28 上午11.26.19.png

3、animation

  • 定义 animations使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
  • 属性值 | 值 |描述 | | --- | --- | | animation-name | 指定要绑定到选择器的关键帧的名称 | | animation-duration | 一个动画周期的时长，单位为秒或者毫秒，无单位就无效 | | animation-timing-function | 定义css动画在每一个动画周期中执行的节奏，可以使用预定义的值，或者使用自己的值，预定义的有：linear(匀速)，ease(默认值，动画从低速开始，然后加快，在结束前变慢)，ease-in(动画低速开始)，ease-out(动画低速结束)，ease-in-out(动画低速开始和结束)，steps(int, start或者end)（指定时间函数中的间隔数量，第一个参数指定函数的间隔数，该参数是一个正整数，第二个参数可选，表示动画是时间段的开头连续还是末尾连续，starts直接开始，end默认值，表示戛然而止）， cubic-bezier(n,n,n,n)（在 cubic-bezier函数中自己的值，可能的值是从0到1的数值） | | animation-delay | 设置动画在启动前的延迟间隔，属性可以指定一个或多个以逗号分隔的值。| | animation-iteration-count | 定义动画的播放次数 | | animation-direction | 指定动画是否反向播放，有如下几个值，normal(默认值) reverse(动画反向播放) alternate(动画先按照顺序播放，然后接着反向播放一次，这里需要设置animation-iteration-count为2，不然不设置的话可能只会正向播放一次) alternate-reverse(动画先反向播放一次，然后再正向播放一次，也需设置animation-iteration-count) initial inherit(继承父元素) | | animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式，有如下几个取值， none(默认值) forwards(保留执行期间遇到的最后一个关键帧计算值) backwards(动画将在应用于目标时应用第一个关键帧中定义的关键词) both(遵循forwards和backwards的规则，在两个方向上扩展动画属性) | | animation-play-state | 指定动画是否正在运行或已暂停，取值如下，paused(暂停) running(正在运行，默认值) initial inherit
  • 使用
<div class="animated bounceIn"></div>

.animated {
  width: 200px;
  height: 200px;
  background-color: aqua;
  animation-duration: 10s;
  animation-fill-mode: both;
}
@keyframes bounceIn {
  0% {
       opacity: 0;
       transform: scale(0.3);
  }
  50% {
       opacity: 1;
       transform: scale(1.05);
  }
  70% {
       transform: scale(0.9);
  }
  100% {
       transform: scale(1);
  }
}
.bounceIn {
   animation: bounceIn 10s 2;
   animation-direction: alternate-reverse;
}

三、区别

  1. transion只有两个状态：开始状态和结束状态，但是animation可以借助keyframes来展现多个状态。
  2. transition需要触发条件，可能是鼠标移入或者移出条件，但是animation可以自动触发。
  3. transition 相当于是只设置了初始和结束两个状态的animation，使用起来比较简洁。
  4. transform主要是图形的变化。

四、具体使用

1、上下跳动动画

  • div
<div class="bounce">Bounce</div>
  • style
.bounce {
    animation: bounce 2.5s infinite 0.5s both;
    transform-origin: center bottom;
}
@keyframes bounce {
    0%,
    7%,
    25%,
    36%,
    45%,
    50% {
      animation-timing-function: ease-out;
      transform: translate3d(0, 0, 0);
    }
    15%,
    16% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -24px, 0);
    }
    30% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -12px, 0);
    }
    41% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -6px, 0);
    }
    47% {
      animation-timing-function: ease-in;
      transform: translate3d(0, -3px, 0);
    }
}

2、文字渐变动画

-webkit-background-clip 可以创建基于文字的背景裁剪，如果将文字的颜色设置为 transparent，文字就可以表现为背景的颜

  • div
<div class="gradient-color-text">
    We are not moving forward to change the world
</div>
  • style
@keyframes text-color-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.gradient-color-text {
  background-size: 400% 400%;
  background-image: linear-gradient(
    to right,
    #ff0000,
    #ff8000,
    #fff200,
    #51ff00,
    #00d0ff,
    #9000ff,
    #ff008c
  );
  -webkit-background-clip: text;
  animation: text-color-gradient 10s ease infinite;
  color: transparent;
  font-size: 20px;
}

3、炫酷的loading

  • div
<div class="loader">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>;
  • style
.loader {
  position: absolute;
  top: 50%;
  left: 40%;
  margin-left: 10%;
  transform: translate3d(-50%, -50%, 0);
}
.dot {
  width: 24px;
  height: 24px;
  background-color: #3ac;
  border-radius: 100%;
  display: inline-block;
  animation: slide 1s infinite;
}
@keyframes slide {
  0% {
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.dot:nth-child(1) {
  animation-delay: 0.1s;
  background: #32aacc;
}
.dot:nth-child(2) {
  animation-delay: 0.2s;
  background: #64aacc;
}
.dot:nth-child(3) {
  animation-delay: 0.3s;
  background: #96aacc;
}
.dot:nth-child(4) {
  animation-delay: 0.4s;
  background: #c8aacc;
}
.dot:nth-child(5) {
  animation-delay: 0.5s;
  background: #faaacc;
}

五、动画库推荐

1、Animate.Css

2、Hover.css

avatar
文章
阅读
粉丝