Transition and Animation of CSS

  animation, css3, Front end, transition

Blog links:Transition and Animation of CSS

This article summarizes two attributes used for animation in CSS3, one istransitionThe other isanimation.

Difference comparison

CSS3 Difference
transition Smoothly change attribute values (from one value to another) within a given duration, that is, only the start and end parameters need to be specified, and the animation will be triggered when the parameters change.
Common language mouse events (:hoveractive:focus:click) or keyboard input
Event triggering is required and cannot occur automatically when the web page is loaded. One-off, not repeated unless triggered again and again.
Only start and end states can be defined, not intermediate states.
animation You can write your own changes at the beginning, during and at the end of the animation, which is suitable for making more subtle animation. You need to explicitly specify key frames (@keyframeThe parameter of.
When the web page is loaded, it will be executed directly and can control the changes of animation in each stage by itself.

animationAndtransitionThe biggest difference is thattransitionTriggered when a parameter changes, andanimationIt is executed directly, and all animation effects need to specify the key frame parameters explicitly.

CSS3 Abbreviation sequence
transition propertyNametiming-functionSpecial effects
animation nameNametiming-functionSpecial effects
iteration-countfrequencyfill-modeFill mode

Browser support

transitionstyle of writing

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: width 2s ease-in 2s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

animationstyle of writing

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  animation: change 5s; /*8个属性中至少要有名称、时间*/
}

/*设定开始与结束状态*/
/*from 就是0%,to 就是100%*/
@keyframes change {
  from {
    background-color: #4BC0C8;
  }
  to {
    background-color: #C779D0;
  }
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  animation: change 5s; /*8个属性中至少要有名称、时间*/
}

/*设定开始与结束状态*/
/*from 就是0%,to 就是100%*/
@keyframes change {
  0% {
    background-color: #4BC0C8;
  }
  20% {
    background-color: #C779D0;
  }
  60% {
    background-color: #FEAC5E;
  }
  80% {
    background-color: #185a9d;
  }
  100% {
    background-color: #4BC0C8;
  }
}
Attribute value
animation-name @keyframesAfter the name
animation-durationTime timeIn seconds, such as3s initialDefault valueinheritInherit parent layer
animation-timing-functionSpecial effects linearConstant velocity,easeease-inease-outease-in-outstep-startstep-endsteps(int,start/end)cubic-bezier(n,n,n,n)Can be used on the official website
animation-delay In seconds, such as2s
animation-iteration-countfrequency numberThe default value is1Therefore, fill in2, the number of animation runs is1+2=3nextinfiniteinfinite loop
animation-directiondirection normalreverseReverse,alternateAfter the first anti-positive
animation-fill-mode forwardsUse the last value of the keyframebackwardsUse the initial valueboth
animation-play-statePlayback status pausesuspendrunningIs the default valueinitialDefault value,inheritInherit parent layer

Animation.css

Download the website:Animate.css
GitHub:Css usage instructions