CSS3--动画 - 掘金

transtion--过渡动画

过渡动画可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性，transition只执行一次

写法

transtion: color 3s 6s ease;

transition-property: 需要执行变化的属性
transition-duration：变化执行的时间，举个例子就是：从A开车到B所用时间
transition-timing-function：变化的方式，举个例子就是：从A开车到B的途中，车速是匀速还变速的
transition-delay: 实际中就是用来指定多个动画发生的顺序

/*二者同时变化后变化*/
transition: background-color 3s, color 3s 6s;
/*指定color在6s后变化*/
transition: background-color 3s, color 3s 6s;

animation--动画

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

最重要的两个属性

animation-name:动画的名称
animation-duration动画执行时间

div {
  width: 100px;
  height: 100px;
  animation-name: full-color;
  animation-duration: 3s;
}

@keyframes full-color {
  0% {
    background-color: red;
  }
  100% {
    background-color: yellow;
  }
}

@keyframes是什么

类比于拍电影，把名字(animation-name)和需要拍多久(animation-duration)定好，然后确定一些细节(其余属性，也可以没有)，然后@keyframes就是拍摄中的内容

余下几个属性

动画执行几次：animation-iteration-count(infinite无限)
假如执行次数有限，最后是什么状态：animation-fill-mode,默认执行前的状态，forwards最后一帧的状态

div {
  width: 100px;
  height: 100px;
  animation-name: full-color;
  animation-duration: 3s;
  animation-iteration-count: 3;
  animation-fill-mode: forwards;
}

@keyframes full-color {
  0% {
    background-color: red;
  }
  100% {
    background-color: yellow;
  }
}

animation-timing-function: 参考transition-timing-function

#anim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  background-color: pink;
  animation-name: active;
  animation-duration: 520ms;
  animation-iteration-count: infinite;
}
#anim:before {
  content: "";
  display: black;
  position: absolute;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: pink;
}
#anim:after {
  content: "";
  display: black;
  position: absolute;
  top: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: pink;
}
@keyframes active{
  0% {
      transform: scale(1) rotate(45deg);
    }
    50% {
      transform: scale(0.6) rotate(45deg);
    }
}