小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

前言

最近学习vue的过渡和动画发现我对css3的过渡和动画了解的不多项目中也没怎么使用，现在就开始补知识。

transition

transition 有5个属性:

transition: 本身就是其他4个属性的组合使用。
transition-property: 我们想对目标元素的哪些属性做过渡效果，如: width、height、color等等。
transition-duration: 整个过渡的持续时间。
transition-delay: 延迟生效。
transition-timing-function: 在整个过渡中你想要开始快呢、还是结束快呢就是控制每个时间的速度。

linear: 匀速运动。

ease: 加速运动--减速。

ease-in: 加速运动。

ease-out: 减速运动。

ease-in-out: 开始慢后面慢中间快。

cubic- bezier(n,n,n,n): 自定义。

animation

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

这个是动画全部属性组合使用。跟过渡还是很像的iteration-count、 direction、 fill-mode、 play-state这几个属性。

先讲下这个name: 这个与过渡的不相同，过渡只写一个属性，这里写的是一个对象可以写很多属性结合@keyframes

先来个案例:

<!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>animation</title>
</head>
<style>
  div {
    height: 100px;
    width: 100px;
    background-color: cadetblue;
    /* 这个divMove 就是对应@keyframes 后面的名字*/
    animation: divMove 10s; 
  }
  @keyframes divMove {
    /* 这里表示在整个过程中0%-100% 前面我们定义了10s 就是表示我们要在这个10秒过程中该元素对应的变化, 当然你只想要开头结尾可以使用 from to */
    0% {margin: 0px;background-color: chocolate;}
    25% {margin: 25px;background-color: cornflowerblue;}
    50% {width: 200px;height: 200px;}
    100% {margin: 0; background-color: cadetblue;}
  }
</style>
<body>
  <div>hello animation</div>
</body>
</html>

direction: 正常我们是从from --> to(0% --> 100%)所以使用了这个direction我们就可以实现to --> from(100% --> 0%)的过程。

normal: 默认正常播放from --> to。
reverse: 反向播放to --> from。
alternate: (1、3、5)正，(2、4、6)反跟iteration-count结合使用
alternate-reverse: 与上边相反

play-state: 动画暂停和开始。

添加代码:

 div:hover {
    animation-play-state: paused;
  }

fill-mode: 就是表示要不要我们@keyframes动画最后100%的属性。 none: 默认表示不要。 forwards: 要动画最后属性。

<!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>animation</title>
</head>
<style>
  div {
    height: 100px;
    width: 100px;
    background-color: cadetblue;
    /* 这个divMove 就是对应@keyframes 后面的名字*/
    animation: divMove 10s; 
    animation-fill-mode: forwards;
  }
  @keyframes divMove {
    /* 这里表示在整个过程中0%-100% 前面我们定义了10s 就是表示我们要在这个10秒过程中该元素对应的变化, 当然你只想要开头结尾可以使用 from to */
    0% {margin: 0px;background-color: chocolate;}
    25% {margin: 25px;background-color: cornflowerblue;}
    50% {width: 200px;height: 200px;}
    100% {width:300px;height:300px;margin: 0; background-color: red;}
  }
  div:hover {
    animation-play-state: paused;
  }
</style>
<body>
  <div>hello animation</div>
</body>
</html>

最后，变成了红色宽度高度也变成了300px

backwards: 是和animation-delay组队使用的。

首先我们先看只使用animation-delay:

<!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>animation</title>
</head>
<style>
  div {
    height: 100px;
    width: 100px;
    background-color: cadetblue;
    /* 这个divMove 就是对应@keyframes 后面的名字*/
    animation: divMove 10s; 
    /* animation-fill-mode: backwards; */
    animation-direction: reverse;
    animation-delay: 3s
  }
  @keyframes divMove {
    /* 这里表示在整个过程中0%-100% 前面我们定义了10s 就是表示我们要在这个10秒过程中该元素对应的变化, 当然你只想要开头结尾可以使用 from to */
    0% {margin: 0px;background-color: chocolate;}
    25% {margin: 25px;background-color: cornflowerblue;}
    50% {width: 200px;height: 200px;}
    100% {width:300px;height:300px;margin: 0; background-color: red;}
  }
  div:hover {
    animation-play-state: paused;
  }
</style>
<body>
  <div>hello animation</div>
</body>
</html>

我这里是倒着动画的就是在停的那几秒然后一下子变成了红色有点奇怪。因此就是使用到backwards。

这里因为animation-direction: reverse所以拿的to(100%)的属性值。

如果animation-direction: normal 就是拿from(0%)的属性值。

both: 就是backwards和forwards结合体,既可以继承to或者from的属性值，最后属性还是拿最后的动画效果

结论

过渡有4个参数。动画有多个属性需要和@keyframes结合使用。

最后，希望大家的页面都更加的细滑。

css3的过渡与动画讲解

前言

transition

animation

结论