Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

What are transform and translate for?

  • Implement a progress bar load from 0 to 100
  • Implement a circular progress bar

transform: translate(200px,50px); Move the element 200px to the right and 50px down from its original position

What can animation do?

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

instructions

  • Animation-name specifies the name of the keyframe to bind to the selector
  • Animation-duration Specifies how many seconds or milliseconds the animation will take to complete
  • Animation-timing-function Sets how the animation will complete a cycle
  • Animation-delay Sets the delay before animation starts.
  • Animation-rotund-count defines the number of times an animation is played.
  • Animation-direction Specifies whether the animation should be rotated backwards.
  • Animation-fill-mode specifies the style to be applied to the element when the animation does not play (when the animation is complete, or when the animation has a delay before it starts playing).
  • Animation-play-state Specifies whether the animation is running or paused.
  • Initial sets the property to its default value. Read the introduction to Initial.
  • Inherit inherits attributes from the parent element. Read about initInherital.
div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; } @keyframes mymove { from {left:0px; } to {left:200px; }}Copy the code

transition

Transition-property Specifies the name of the CSS property that sets the transition effect. Transition-duration Specifies how many seconds or milliseconds it takes to complete the transition effect. Transition-timing-function Specifies the speed curve for the speed effect. Transition-delay defines when the transition effect starts. Ss with :hover, :active and other pseudo-class use, to achieve the corresponding animation effect.Copy the code

Transitions are divided into two stages: forward and reverse. These two stages are described in detail using specific examples below.

  • The transition set only in the non-hover state considers that it has a reverse state transition animation, that is, the animation when the mouse moves over the element and then leaves. In this case, the forward state and the reverse state are the same, that is to say, there are transition animations when the mouse moves to and from the element.
.app {
  width: 300px;
  transition: all 3s linear .2s;
}

.app:hover {
  width: 100px;
}
Copy the code
  • Set transition only in hover state

The transition from this state is thought to animate the forward state, while the reverse state is not animated. That is, moving the mouse over an element will animate it, moving out of an element will not animate it, and the width of the element will be restored instantly.

.app {
  width: 300px;
}

.app:hover {
  width: 100;
  transition: all 3s linear .2s;
}
Copy the code
  • Set transition to both hover and non-hover states

At this time, both the forward state and reverse state animation is set. The animation lasts for 1s when the mouse moves over the element, and 3s when the mouse moves out of the element.

.app {
  width: 300px;
 transition: all 3s linear .2s;
}

.app:hover {
  width: 100;
  transition: all 1s linear .2s;
}
Copy the code