Transtion — Transition animation

Transition animations can define different transition effects for an element as it switches between different states. Such as switching between pseudo-elements such as :hover, :active or state changes implemented through JavaScript.

The transition CSS property is a shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay. Transition is executed only once

  • writing
transtion: color 3s 6s ease;
Copy the code
  • transition-property: Attributes that need to be changed
  • transition-durationChange the execution time, for example, driving time from A to B
  • transition-timing-functionFor example, driving from A to B at A constant or variable speed
  • transition-delay: specifies the order in which multiple animations occur
/* Change */
transition: background-color 3s, color 3s 6s;
/* Specify color to change after 6s */
transition: background-color 3s, color 3s 6s;
Copy the code

Animation, animation

The animation properties are animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, A shorthand property form for the animation-direction, animation-fill-mode, and animation-play-state properties.

The two most important properties

  1. animation-name: Name of the animation
  2. animation-durationAnimation execution time
div {
  width: 100px;
  height: 100px;
  animation-name: full-color;
  animation-duration: 3s;
}

@keyframes full-color {
  0% {
    background-color: red;
  }
  100% {
    background-color: yellow; }}Copy the code
  1. @keyframesWhat is the

Analogous to shooting a movie, set the animation-name and animation-duration, then determine some details (other attributes, but not), and @keyframes is the content of the shooting

A few remaining properties

  • Animation executes several times:animation-iteration-count(infinite, infinite)
  • If the number of executions is limited, what is the final state:animation-fill-mode, default state before execution,forwardsThe state of the last frame
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; }}Copy the code
  • Animation – timing – function: referencetransition-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); }}Copy the code