Github上流行的CSS3动画效果库，你有没有尝试过-animate.css

绍

animate.css是一堆很酷，有趣且跨浏览器的动画，供你在项目中使用。非常适合强调，主页，滑块和一般的加水效果。

animate.css v4正在进行许多改进和重大更改，包括CSS自定义属性支持（又称CSS变量）和类前缀，以确保安全使用。感兴趣的小伙伴可以上github关注进展以及提供反馈！

Github

animate.css的受欢迎程度毋庸置疑，在Github上star数高达接近63k，这是一个非常可观的数据，我相信其实大多数人或多或少都用过它

https://daneden.github.io/animate.css/

安装使用

使用npm安装

$ npm install animate.css --save

或者 yarn:

$ yarn add animate.css

要在你网站中使用animate.css，只需将样式表放入文档的<head>中，然后将动画类（animated）与任何动画名称一起添加到元素中，那么一个简单的动画效果就实现了，一下就是一个最简单的例子：

<head>
 <link rel="stylesheet" href="animate.min.css">
</head>

<h1 class="animated infinite bounce delay-2s">Example</h1>

以下是你可以使用的所用动画效果class

可以更改动画的持续时间，添加延迟或更改动画播放的次数：

.yourElement {
 animation-duration: 3s;
 animation-delay: 2s;
 animation-iteration-count: infinite;
}

JavaScript的用法：

将animate.css与Javascript结合使用时，可以使用animate.css进行大量其他工作。一个简单的例子：

const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

还可以检测动画何时结束：

const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })

可以使用以下简单功能来添加和删除动画：

function animateCSS(element, animationName, callback) {
 const node = document.querySelector(element)
 node.classList.add('animated', animationName)
 function handleAnimationEnd() {
 node.classList.remove('animated', animationName)
 node.removeEventListener('animationend', handleAnimationEnd)
 if (typeof callback === 'function') callback()
 }
 node.addEventListener('animationend', handleAnimationEnd)
}

并像这样使用它：

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
 // Do something after animation
})

注意，这些示例使用的是ES6的const声明，不再支持IE10和某些古老的浏览器。

设定延迟和速度：

可以直接在元素的class属性上添加延迟，如下所示：

<div class="animated bounce delay-2s">Example</div>

快慢class

通过添加这些类，可以控制动画的速度，如下所示：

<div class="animated bounce faster">Example</div>

自定义构建

Animate.css由gulp.js提供支持，这意味着你可以轻松创建自定义版本。

总结

有些时候你看到别人的网站，感觉速度也不是很快，但是很自然，那么很有可能是使用了动画，使用动画不会加快网站的访问速度，但是可以让网页浏览器来更加的平滑、更加的自然，使用起来会感觉很舒适，不会给人卡顿的感觉！

. CSS 动画有哪些? transition过渡与animation动画的区别是什么？

1. transition 过渡
2. transform 变形
3. animation 关键帧动画

2. 首先介绍各个动画的语法+属性

2.1 transition 过渡

1. 语法:
   1. transition: property duration timing-function delay
      1. transition: 属性是个复合属性
      2. transition-property: 规定设置过渡效果的 css 属性名称
      3. transition-duration: 规定完成过渡效果需要多少秒或毫秒
      4. transition-timing-function: 指定过渡函数, 规定速度效果的速度曲线
      5. transition-delay: 指定开始出现的延迟时间
2. 默认值分别为: all 0 ease 0;
   1. 注: transition-duration 时长为 0, 不会产生过渡效果

3. 改变多个 css 属性的过渡效果时, 代码示例:
   1.  a {
         transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
       }
4. 子属性:
   1. transition-property
      1. transition-property: none |all |property;
         1. 值为 none 时, 没有属性会获得过渡效果
         2. 值为 all 时, 所有属性都将获得过渡效果
         3. 值为指定的 css 属性应用过渡效果, 多个属性用逗号隔开
     2. color : background-color, border-color, color, outline-color ;
     3. length : 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,
     4. integer : 离散步骤（整个数字）, 在真实的数字空间, 以及使用 floor()转换为整数时发生 如: outline-offset,z-index
     5. number : 真实的（浮点型）数值, 如:zoom,opacity,font-weight
     6. rectangle : 通过x, y, width 和 height（转为数值）变换，如: crop
     7. visibility : 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
     8. shadow : 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
     9. background-image : 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画。
   2. transition-duration
     1. transition-duration: time;
        1. 该属性主要用来设置一个属性过渡到另一个属性所需的时间, 也就是从旧属性过渡到新属性花费的时间长度, 俗称持续时间
   3. transition-timing-function
     1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
        1. 该属性指的是过渡的 “缓动函数” 。 主要用来指定浏览器的过渡速度, 以及过渡期间的操作进展情况, 解释下:
        2. 注意: 值 cubic-bezier(n,n,n,n) 可以定义自己的值, 如 cubic-bezier(0.42,0,0.58,1)
   4. transition-delay
      1. 这个属性没什么说的了, 就是过渡效果开始前的延迟时间, 单位秒或者毫秒

2.2 transform 变形

1. 可以利用 transform 功能来实现文字或图像的 旋转、缩放、倾斜、移动 这四种类型的变形处理
   1. 旋转 rotate
      1. 用法: transform: rotate(45deg);
      2. 共一个参数 “角度”, 单位 deg 为度的意思, 正数为顺时针旋转, 负数为逆时针旋转, 上述代码作用是顺时针旋转45度
   2. 缩放 scale
      1. 用法: transform: scale(0.5)  或者  transform: scale(0.5, 2);
      2. 一个参数时: 表示水平和垂直同时缩放该倍率
      3. 两个参数时: 第一个参数指定水平方向的缩放倍率, 第二个参数指定垂直方向的缩放倍率 。
   3. 倾斜 skew
      1. 用法: transform: skew(30deg)  或者 transform: skew(30deg, 30deg);
      2. 一个参数时: 表示水平方向的倾斜角度 。
      3. 两个参数时: 第一个参数表示水平方向的倾斜角度, 第二个参数表示垂直方向的倾斜角度 。
      4. skew 的默认原点 transform-origin 是这个物件的中心点
   4. 移动 translate
      1. 用法: transform: translate(45px)  或者 transform: translate(45px, 150px);
      2. 一个参数时: 表示水平方向的移动距离;
      3. 两个参数时: 第一个参数表示水平方向的移动距离, 第二个参数表示垂直方向的移动距离 。
2. 基准点 transform-origin
   1. 在使用 transform 方法进行文字或图像的变形时, 是以元素的中心点为基准点进行的 。 使用 transform-origin 属性, 可以改变变形的基准点 。
   2. 用法: transform-origin: 10px 10px;
   3. 表示相对左上角原点的距离, 单位 px, 第一个参数表示相对左上角原点水平方向的距离, 第二个参数表示相对左上角原点垂直方向的距离;
   4. 两个参数除了可以设置为具体的像素值, 其中第一个参数可以指定为 left、center、right, 第二个参数可以指定为 top、center、bottom。
3. 多方法组合变形
   1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
   2. 这四种变形方法顺序可以随意, 但不同的顺序导致变形结果不同, 原因是变形的顺序是从左到右依次进行

2.3 animation 关键帧动画

1. 在 CSS3 中创建动画, 您需要学习 @keyframes 规则 。
2. @keyframes 规则用于创建动画 。 在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。
3. 必须定义动画的名称和时长 。 如果忽略时长, 则动画不会允许, 因为默认值是 0。
4. 请用百分比来规定变化发生的时间, 或用关键词 "from" 和 "to", 等同于 0% 和 100% 。
5. 语法
   1. animation: name duration timing-function delay iteration-count direction;
     1. animation-name    规定需要绑定到选择器的 keyframe 名称
     2. animation-duration   规定动画完成一个周期所花费的秒或毫秒。默认是 0。
     3. animation-timing-function    规定动画的速度曲线。 默认是 "ease"。
     4. animation-delay    规定动画何时开始 。 默认是 0。
     5. animation-iteration-count    规定动画被播放的次数 。 默认是 1。
     6. animation-direction    规定动画是否在下一周期逆向地播放 。 默认是 "normal"; alternate (轮流),。
        1. alternate (轮流): 动画播放在第偶数次向前播放, 第奇数次向反方向播放 (animation-iteration-count 取值大于1时设置有效
        2. 语法: animation-direction: alternate;
   2. animation-play-state   规定动画是否正在运行或暂停 。 默认是 "running" 播放; paused 暂停播放 。
        1. 语法: animation-play-state: paused;
   3. animation-fill-mode   属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。
        1. none:        不改变默认行为 (默认, 回到动画没开始时的状态) 。
        2. forwards:    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义) (动画结束后动画停留在结束状态) 。
        3. backwards:  在 animation-delay 所指定的一段时间内, 在动画显示之前, 应用开始属性值 (在第一个关键帧中定义) （动画回到第一帧的状态）。
        4. both:        向前和向后填充模式都被应用 （根据 animation-direction 轮流应用 forwards 和 backwords 规则）。
        5. 语法:        animation-fill-mode: forwards
   1. 0% 是动画的开始, 100% 是动画的完成。

3. 接下来是常见的面试题目以及实现代码

3.1 transition 示例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画- transition </title>
</head>
<style>
* {
  padding: 0;
  margin: 0;
}
/* CSS实现示例 */
.w_tran-css {
  width: 350px;
  height: 350px;
  background: url('./images/1-2-https原理.jpg') no-repeat center;
  transition: all 1s ease-in-out;
  background-size: 110%;
  border: 5px solid slateblue;
}
.w_tran-css:hover {
  background-size: 120%;
  border: 5px solid skyblue;
}

</style>
<body>
  <div class="w_tran-css">
    <p>transition 动画 --- 测试背景图中的动画效果</p>
  </div>
</body>
</html>

展示效果如图所示:

3.2 transition 示例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画 - transition</title>
</head>
<style>
* {
  margin: 0;
}
.w_outer {
  display: flex;
  justify-content: center;
  background-color: skyblue;
  height: 100vh;
}
nav {
  display: flex;
  width: 80%;
  height: 40px;
  gap: 40px;
}

a {
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-out;
}

a:hover, a:focus {
  background-color: steelblue;
  color: #333;
}
</style>
<body>
  <div class="w_outer">
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact Us</a>
      <a href="#">Links</a>
    </nav>
  </div>
</body>
</html>

展示效果如图所示:

3.3 transform 示例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画 - transform</title>
</head>
<style>
* {
  padding: 0;
  margin: 0;
}
/* 简单示例-1 */
.w_outer {
  width: 300px;
  border: 120px solid red;
}
#btn {
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 1px solid blue;
  position: relative;
  cursor: pointer;
}
.ball {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background: rgb(17, 8, 8);
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

/* 简单示例-1 */
.w_img {
  width: 300px;
  /* transform 设置动画时, 需要配合 transition 来设置过渡时间*/
  transition: 1s;
}
.w_img:hover {
  transform: rotate(90deg);
  transform-origin: 0, 0 ;
}

/* 简单示例-3 */
.w_trans-3 {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

</style>
<body>
  <!-- 示例一 -->
  <div class="w_outer">
    <div id="btn">
      <p>transform --- 动画 Click anywhere to move the ball</p>
      <div id="foo" class="ball"></div>
    </div>
  </div>
  <!-- 示例二 -->
  <img class="w_img" src="./images/1-https-注释.png" alt="">

  <!-- 示例三 -->
  <div class="w_trans-3">transform - 设置变形</div>
</body>
<script>
var f = document.getElementById('foo');
var far = document.getElementById('btn')
far.onclick =  function(ev, obj){
  f.style.transform = 'translateY('+(ev.clientY - 25 - this.offsetLeft)+'px)';
  f.style.transform += 'translateX('+(ev.clientX - 25 - this.offsetTop)+'px)';
};
</script>
</html>

展示效果如图所示:

3.4 transform 示例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画 - transform -- 经典旋转正方体</title>
</head>
<style>

  ul{
    position: relative;
    height: 500px;
    width: 500px;
    list-style: none;
    margin: 100px auto;
    transform-style: preserve-3d;
    animation: ani 4s linear 0s infinite;
  }
  li{
    position:absolute;
    height: 500px;
    width: 500px;
    font-size: 32px;
    text-align: center;
    line-height: 500px;
    backface-visibility: hidden;
  }


  .w_noodle-1 {
    background-color:  green;
    transform: translateZ(250px);
  }
  .w_noodle-2 {
    background-color: yellow;
    transform: rotateY(90deg) translateZ(250px);
  }
  .w_noodle-3 {
    background-color: orange;
    transform: rotateX(90deg) translateZ(250px);
  }
  .w_noodle-4 {
    background-color: red;
    transform: rotateX(-90deg) translateZ(250px);
  }
  .w_noodle-5 {
    background-color:blue;
    transform: rotateY(-90deg) translateZ(250px);
  }
  .w_noodle-6 {
    background-color:purple;
    transform: rotateX(180deg) translateZ(250px);
  }

  @keyframes ani{
    100%{
      transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
  }
</style>
<body>
<ul>
  <li class="w_noodle-1">1</li>
  <li class="w_noodle-2">2</li>
  <li class="w_noodle-3">3</li>
  <li class="w_noodle-4">4</li>
  <li class="w_noodle-5">5</li>
  <li class="w_noodle-6">6</li>
</ul>
</body>
</html>

展示效果如图所示:

3.4 A transform 示例三

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画 - transform -- 时钟</title>
</head>
<style id="css">
li{
  list-style: none;
}
#w_outer{
  width: 400px;
  height: 400px;
  position: absolute;
  top:calc(50% - 200px);
  left:calc(50% - 200px);
  border: 2px solid palegoldenrod;
}
#w_cont{
  width: 200px;
  height: 200px;
  position: absolute;
  top:calc(50% - 100px);
  left:calc(50% - 100px);
  border: 2px solid cyan;
  border-radius: 50%;
}
.w_h-item{
  width: 4px;
  height: 12px;
  position: absolute;
  top: 0;
  left: calc(50% - 2px);
  background-color: gray;
  transform-origin: 2px 100px;
}
.angle30{transform : rotate(30deg);}
.angle60{transform : rotate(60deg);}
.angle90{transform : rotate(90deg);}
.angle120{transform : rotate(120deg);}
.angle150{transform : rotate(150deg);}
.angle180{transform : rotate(180deg);}
.angle210{transform : rotate(210deg);}
.angle240{transform : rotate(240deg);}
.angle270{transform : rotate(270deg);}
.angle300{transform : rotate(300deg);}
.angle330{transform : rotate(330deg);}
#fixPoint{
  width: 10px;
  height: 10px;
  position: absolute;
  top:calc(50% - 5px);
  left:calc(50% - 5px);
  background-color: cadetblue;
  border-radius: 50%;
}
#hour{
  width: 6px;
  height: 70px;
  position:absolute;
  top: 40px;
  left: calc(50% - 3px);
  background-color: darkblue;
  transform-origin: 50% 60px;
}
#minute{
  width: 4px;
  height: 75px;
  position:absolute;
  top: 35px;
  left: calc(50% - 2px);
  background-color: yellow;
  transform-origin: 50% 65px;
}
#second{
  width: 2px;
  height: 90px;
  position:absolute;
  top: 20px;
  left: calc(50% - 1px);
  background-color: red;
  transform-origin: 50% 80px;
}
</style>
<body>
<div id = "w_outer">
  <div id = 'w_cont'>
    <ul id = "w_hour-line">
      <li class = "w_h-item"></li>
      <li class = "w_h-item angle30"></li>
      <li class = "w_h-item angle60"></li>
      <li class = "w_h-item angle90"></li>
      <li class = "w_h-item angle120"></li>
      <li class = "w_h-item angle150"></li>
      <li class = "w_h-item angle180"></li>
      <li class = "w_h-item angle210"></li>
      <li class = "w_h-item angle240"></li>
      <li class = "w_h-item angle270"></li>
      <li class = "w_h-item angle300"></li>
      <li class = "w_h-item angle330"></li>
    </ul>
    <div id = "fixPoint"></div>
    <!-- 时针 -->
    <div id = "hour" class="min"></div>
    <!-- 分针 -->
    <div id = "minute" class="sec"></div>
    <!-- 秒针 -->
    <div id = "second" class="circle"></div>
  </div>
</div>
</div>
</body>
<script>


window.onload = function(){
  var hourHand = document.getElementById('hour');
  var minuteHand = document.getElementById('minute');
  var secondHand = document.getElementById('second');

  // 初始化(细节知识点: 如果这里不执行初始化, 在页面显示的内容会有一个闪屏的问题: 分针、时针、秒针，重叠在12点这个位置)
  initTime()
  // 执行定时器
  setInterval(initTime, 1000)

  function initTime() {
    var nowTime = new Date();

    // 求取时针角度(这里 -12 在显示上是正确的)
    var hourVal = nowTime.getHours() - 12;
    var hourDeg = hourVal / 12 * 360 + 'deg';

    // 求取分针角度
    var minuteVal = nowTime.getMinutes();
    var minuteDeg = minuteVal / 60 * 360 + 'deg';

    // 求取秒针角度
    var secondVal = nowTime.getSeconds();
    var seconDeg = secondVal / 60 * 360 + 'deg';


    // 原生方法: 利用 DOM 元素的 style 属性设置
    hourHand.style.transform = 'rotate('+ hourDeg + ')';
    minuteHand.style.transform = 'rotate('+ minuteDeg + ')';
    secondHand.style.transform = 'rotate('+ seconDeg + ')';
  }
}
</script>
</html>

展示效果如图所示:

3.6 animation 示例一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画 -- animation 关键帧动画</title>
</head>
<style>
  p {
    width:300px;
    height:300px;
    background:red;
    animation:myfirst 3s infinite alternate;
    /* //Firefox */
    -moz-animation:myfirst 3s infinite alternate;
    /* // Safari and Chrome */
    -webkit-animation:myfirst 3s infinite alternate;
    /* // Opera */
    -o-animation:myfirst 3s infinite alternate;
  }
  @keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Firefox */
  @-moz-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Safari and Chrome */
  @-webkit-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* // Opera */
  @-o-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
</style>
<body>
  <p>无限循环播放动画效果</p>
</body>
</html>

展示效果如图所示:

3.7 animation 示例二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画 -- animation 关键帧动画</title>
</head>
<style>
p {
  background-color: skyblue;
  font: 96px "Microsoft Yahei";
  font-weight: 500;
  text-align: center;
  color: #f35626;
  cursor: pointer;
}
p:hover {
  animation:rubberBand 1.5s;
}
@-webkit-keyframes  rubberBand{
  0%{
    -webkit-transform:scale(1);
    transform:scale(1)
  }
  30%{
    -webkit-transform:scaleX(1.25) scaleY(0.75);
    transform:scaleX(1.25) scaleY(0.75)
  }
  40%{
    -webkit-transform:scaleX(0.75) scaleY(1.25);
    transform:scaleX(0.75) scaleY(1.25)
  }
  60%{
    -webkit-transform:scaleX(1.15) scaleY(0.85);
    transform:scaleX(1.15) scaleY(0.85)
  }
  100%{
    -webkit-transform:scale(1);
    transform:scale(1)
  }
}
@keyframes rubberBand{
  0%{
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
  }
  30%{
    -webkit-transform:scaleX(1.25) scaleY(0.75);
    -ms-transform:scaleX(1.25) scaleY(0.75);
    transform:scaleX(1.25) scaleY(0.75)
  }
  40%{
    -webkit-transform:scaleX(0.75) scaleY(1.25);
    -ms-transform:scaleX(0.75) scaleY(1.25);
    transform:scaleX(0.75) scaleY(1.25)
  }
  60%{
    -webkit-transform:scaleX(1.15) scaleY(0.85);
    -ms-transform:scaleX(1.15) scaleY(0.85);
    transform:scaleX(1.15) scaleY(0.85)
  }
  100%{
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1)
  }
}
</style>
<body>
<div>
  <p>Animate.css</p>
</div>
</body>
<script>

</script>
</html>

展示效果如图所示:

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容。

我们看到设计精美的科技巨头网站（如Apple或微软）或特斯拉或梅赛德斯等汽车公司时，我们每个人都会感到震惊。

使这些网站脱颖而出的因素，往往是吸引人的动画和效果，让我们一次又一次地看。

那么，他们如何使网站如此惊人地互动？

有没有想过这些网站上的动画实际上是如何运作的？

您是否希望为您的企业设计一个同样优雅和互动的网站？

如果是的话，那就别再看了。

请继续阅读，因为这是一个广泛的摘录，涵盖了CSS动画和变换的基础知识，可以极大地帮助您实现商业网站的相同功能。

如果您刚刚进入前端开发领域，或者希望扩展您对前端开发的理解，那么请继续阅读此博客，因为在最后，您将全面了解CSS。

CSS或层叠样式表是您会注意到的Web应用程序的相当一部分。

虽然CSS为Web应用程序设置了样式，但HTML或超文本标记语言构成了它。

动画在改善用户体验方面发挥着关键作用，因为它们有助于提供改进的视觉反馈，并有助于与网站进行交互。

CSS 3具有丰富的内置属性，大大有助于动画元素，并且在所有主流浏览器中也是如此。

但是 - 强大的力量，更大的责任。

动画需要明智地使用，否则你最终可能会创建一个比交互式更令人分心的页面。动画的整个目的是作为一种辅助，而不是在使用Web应用程序时的障碍。

根据谷歌的一份报告，几乎50％的网络流量来自移动设备。因此，任何企业都需要创建适合移动设备的动画。

对CSS（最好是CSS 3），HTML和某些jQuery 有基本的了解也很有必要。jQuery是一个Javascript库，可以帮助开发人员使用网站的元素。这方面的技术术语是 - DOM操作。

由于您的目标受众可能会有所不同，因此您可能使用多种网络浏览器（Mozilla Firefox，Google Chrome，Safari，Opera，Internet Explorer），因此需要满足所有这些需求。

CSS动画有三个重要方面：

Transforms(变换)
Transitions(转变)
Keyframes(关键帧)

描述CSS中动画和变换的关键元素的流程图。

A部分：Transforms

变换有助于以各种奇妙的方式改变您的网页元素 - 从移动元素到重新调整大小，从旋转元素到倾斜它。

最好的部分 - 您可以在不改变文档流程的情况下更改任何内容。

变换有四个重要方面：

Translate
Translate
Rotate
Skew

让我们深入挖掘一下，好吗？

1.Translate

基于Translate将对象从一个点移动到另一个点基本上。

资料来源：0fps.net

Translate会更改元素的坐标。它用于更改2D平面上组件的外观。

Translate意味着在网页上简单地将元素从一个位置移动到另一个位置。您可以在X轴，Y轴或两者上平移对象。

Moves the element on the X-axis
Syntax: transform: translateX(200px); or transform: translateX(-200px);
Moves the element on the Y-axis
Syntax: transform: translateY(200px); or transform: translateY(-200px);
Using shorthand
Syntax: transform: translate(x-axis, y-axis)
Example: transform: translate(200px, 200px);
Alert!
transform: translate(200px); [will only translate the element along the X-axis]

2.Scale

资料来源：camo.envatousercontent.com

人们可以使用图像的大小以及轴X和Y.缩放会扭曲元素的形状并降低元素的质量。大于1的数字将增加大小，小于1的小数将减小大小。

Scaling along the X-axis - transform: scaleX(3);
Scaling along the Y-axis - transform: scaleY(0.5);
Using the shorthand - for scaling along X and Y axis together -
transform: scale(3 , 0.5); or transform: scale(0.5);

3.Rotate

您可以顺时针或逆时针旋转元素。使用的测量单位是度。正值将顺时针旋转元素，反之亦然。这种旋转也会沿X，Y和Z轴发生。

资料来源：gamedev.stackexchange.com

理解CSS动画中的旋转是最棘手的部分之一，因此很多人无法利用此功能的真正潜力。

沿着X轴

想象一下，棉花糖在篝火上旋转时被烤。您必须将元素可视化以与X轴一起转换为页面，这就是X轴上的旋转效果。我们不会看到3D旋转，我们能够看到的是元素高度的变化。

Syntax: transform: rotateX(45deg);

沿着Y轴

想象一个杆子上的舞者。元素将沿Y轴旋转到页面中。你会注意到的是组件的宽度变化了。

Syntax: transform: rotateY(45deg);

沿Z轴

这是使用旋转时可以使用的最佳方向，因为您可以看到实际旋转的元素。也可以分别用正和负旋转值修改顺时针和逆时针运动。为此，尝试想象箭头进入页面并且元素相对于该箭头旋转。

transform: rotateZ(45deg) – clockwise rotation
transform: rotateZ(-45deg) – counterclockwise rotation

Skew

4.gif

Skew元件意味着倾斜。它具有正值和负值，并且像旋转一样，它也以度来度量。

正X值将元素向左弯曲，反之亦然，对于负X.同样，正Y值向下倾斜元素，反之亦然。默认情况下，如果变换中未指定X或Y，则它将相对于X轴移动元素。

Along X-axis
transform: skewX(45deg) or skew(45deg);
Along Y-axis
transform: skewY(80deg);

5.组合变换

也可以将多个转换应用于单个转换语句中。顺序确实很重要（有时），因为第二个变换将应用于第一个变换，第三个变换将应用于前两个变换的结果。

资料来源：commons.wikimedia.org

transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);

所有这些变换都将对某些用户事件生效，例如悬停，点击，焦点，活动等。要查看动作中的魔法，您可以在这些事件中添加变换。

.element-to-animate{
display: block
}
.element-to-animate:hover{
transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);
}

B部分：TRANSITIONS

资料来源：mozillademos.org

如果您有机会查看上面的代码，您可能会注意到在状态更改期间悬停时的混蛋; 这恰恰是Transitions的目的。Transitions有助于使动画流畅。

可以借助以下属性控制转换：

transition-property
transition-duration
transition-timing-function
transition-delay

transition-property

这些是可以使用转换的CSS属性。其范围从使用边距和填充到背景和边框。您可以将转换应用于特定功能或完整列表。可在此处找到此权限范围内所有属性的完整列表。

将transition属性应用于特定的CSS属性

transition-property: background-color;

将转换应用于整个CSS属性列表

transition-property: all;

transition-duration

动画将在其中播放的持续时间。这可以很容易地以秒（s）或毫秒（ms）来测量。建议使用秒，因为它使它们易于阅读 - 即使你办公室的同事也不会被你惹恼！

transition-duration: 0.5s;

transition-timing-function

速度可以通过动画来改变用户体验; 因此建议控制它。您可以通过使用transition-timing-function来实现它。

CSS 3团队非常友好地为我们提供了一些内置的速度值，如ease, ease-in, ease-in-out

如果你希望掌握速度的全部命令 - 使用Bezier曲线。

transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

transition-delay

这有助于在启动动画的触发事件和动画的实际开始之间创建暂停。简单地说，转换延迟 - 延迟动画。它以秒（s）或毫秒（ms）为单位进行测量。

transition-delay: 0.5s;

速记：

transition: (property) (duration) (transition-timing-function) (transition-delay);

两个面向时间的功能的顺序，即持续时间和转换延迟问题！

Transforms和Transitions一起使用

7.gif

状态1：NORMAL

.element-to-animate display: block; transition: transform 1s ease 0.2s, background 1s; }

状态2：HOVER

.element-to-animate:hover{ background: black; transform: translateX(200px); }

对于在状态1和状态2之间转换，可以将转换分别应用于所有属性和单个时序，或者如果要在状态2中的所有属性上应用转换，则：

transition: all 1s ease 0.2s;

C部分：KEYFRAMES

资料来源：css-tricks.com

关键帧有助于在特定时间将动画从一个更改为另一个。

可以通过两种方式使用关键帧：

从…到…
百分比方法

1.从…到…

在这种方法中，动画期间只有2个状态 - 开始状态和结束状态。

句法：

@keyframes animation_name {
 from { }
 to { }
}

使元素（例如，Car）动画化以从其初始位置水平移动：

@keyframes drive{
from {
transform: translateX(-200);
}
to {
transform: translateX(1000px);
 }
}
.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}

2.百分比方法

我们不能在@keyframes中使用from-to，因为现在有超过1个状态。百分比方法将动画分解为各种中间状态，包括开始和结束状态。起始状态用0％表示，结束状态用100％表示。可以有多少中间状态，但建议在整个过程中保持状态的隔离。

示例：0% — 25% — 50% — 75% — 100%

@keyframes jump{
0% { transform: translateY(-50px) }
50% { transform: translateY(-100px) }
100% { transform: translateY(-50px) }
}

•动画速记

也可以使用这种简洁的格式来编写动画：

animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-function) (animation-iteration-count) (animation-direction) (animation-delay);

注意：动画延迟将始终在动画持续时间之后出现。除了它们 - 时间导向的功能和其他属性的顺序无关紧要。

例：

.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}
Can be re-written as:
.car{
animation: drive 3s ease-in infinite normal 2s;
}

我们希望在“car”元素上添加两个动画 - 驱动和跳转。我们可以通过使用“链接动画”和单行代码完成此操作。

•什么是链接动画？

使用CSS轻松播放多个动画。逗号分离技术可用于链接动画并运行一个动画。例如，

···

.car{

animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse;

}

···

动画属性分类：

使用哪种动画？
animation-name：动画的，由名称@keyframes之后的关键字指示
动画结束时该怎么办？
animation-fill-mode：告诉如何处理动画窗口外部动画的元素。
如果您希望重复动画“n”次，请使用，
animation-iteration-count：重复动画。它可以具有数字值，或者如果您希望动画连续播放，则使用“无限”。
如果您想要反转动画的方向
animation-direction：您不需要一起编写单独的动画来反转动画。你可以应用它来播放当前动画，它的方向。

In From – To Approach:
reverse: to - from
alternate: from-to -> to-from -> from-to
alternate-reverse: to-from -> from-to -> to-from
In Percentage Approach
reverse: 100% - 0%
alternate: 0% - 100% -> 100% - 0% -> 0% - 100%
alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%

动画定时功能，控制动画开始，行为和结束的速度。有一些内置值，如ease，ease-in，你可以使用cubic-bezier（n，n，n，n）编写自己的值。在这玩吧。
延迟CSS动画也可以 使用动画延迟将在事件被触发后几秒/毫秒启动动画。

结论

一开始习惯CSS可能有点复杂。但是一旦你习惯了，你就会发现CSS动画和变换非常奇妙。

谢谢阅读。我们希望这篇文章能帮到你。如果确实如此，请大家竖起大拇指，如果您有任何疑问，请随时放弃您的意见。此外，如果您想要分享您想要分享的CSS变换或动画的令人兴奋的用途，我们很乐意听取您的意见。

翻译自：https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c

在线咨询

上一篇：HTML的表格与列表、块及类与ID
下一篇：手把手，教你如何逐步提高JavaScript的编码能力？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Github上流行的CSS3动画效果库，你有没有尝试过-animate.css

绍

Github

安装使用

总结

. CSS 动画有哪些? transition过渡与animation动画的区别是什么？

2. 首先介绍各个动画的语法+属性

2.1 transition 过渡

2.2 transform 变形

2.3 animation 关键帧动画

3. 接下来是常见的面试题目以及实现代码

3.1 transition 示例一

3.2 transition 示例二

3.3 transform 示例一

3.4 transform 示例二

3.4 A transform 示例三

3.6 animation 示例一

3.7 animation 示例二

A部分：Transforms

B部分：TRANSITIONS

C部分：KEYFRAMES

结论

您的项目需求