CSS3 animation properties

This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Simply put: animation is connecting frames. When played continuously at a certain speed, the visual difference is not visible. This is animation.

Know the concept of animation, it will understand how to achieve, we have to put each frame of the picture to draw what it looks like, and then connect with a certain speed.

🤣 then one may ask: what is the difference between transition?

The difference is:

• Transition needs to trigger an event to change its CSS properties over time; The animation can also explicitly change the CSS properties of elements over time to achieve an animation effect without triggering any events.
• The transition only has two frames, beginning and ending, and the rest is done with tween animation. Animation can be set to any number of frames.

Use of animation

@ keyframes rules

The CSS style is specified in the @Keyframes rule, and the animation will gradually go from the start style, through the intermediate frame style, to the final style at a certain time.

For an animation to work, it must be bound to an element. Use the keywords “from” and “to”, equivalent to 0% and 100%.

Define an animation,

@keyframesAnimation name {0%{/ / stylewidth: 200px;
    }
    50%{
         width: 300px;
    }
    100% {
        width: 200px; }}div { 
animation: Animation name5s; // Use the animation todivOn, the animation length5s
}
Copy the code

The animation properties

• 💠 animation-name: specifies the name of the @keyframes animation.

• 💠animation-duration: Specifies the number of seconds or milliseconds it takes for the animation to complete a cycle. The default is 0.

• 💠 animation-delay: specifies when the animation should start. The default is 0.

• 💠 animation-rotund-count: Specifies the number of times the animation will be played. The default is 1.

• 💠 animation-direction: Specifies whether to play the animation forward, backward, or alternately. The default is “normal”.

  • 🔘 normal – Animation plays normally (forward). The default value
  • 🔘reverse – Animation is played backwards (backwards)
  • 🔘alternate – Animation plays forward, then backward
  • 🔘alternate-reverse – The animation is played backwards, then forwards

• 💠 animation-timing-function: specifies the speed curve of the animation. The default is “ease”.

  -🔘 cubic-bezier(n, n, n, n) : Define its own value in the cubic-bezier function. Possible values are between 0 and 1.

  • 🔘 ease: Slow in the front, fast in the middle, and slow in the back

  • 🔘linear: a uniform motion

  • 🔘 ease-in: Slow start

  • 🔘 ease-out: end slowly

  • 🔘 ease-in-out: Transition effect with slow start and finish

• 💠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 playing begins).

  • 🔘 none – Default value. The animation does not apply any styles to elements before or after execution.
  • 🔘forwards – Elements will retain style values set by the last keyframe (depending on animation-direction and animation-rotund-count).
  • 🔘 backwards – The element will take the style values set by the first keyframe (depending on animation-direction) and retain them for the duration of the animation delay.
  • 🔘 both – Animation follows both forward and backward rules, extending animation properties in both directions.

• Animation-play-state: Specifies whether the animation is running or paused. The default is “running”.

• 💠 animation: Composite of all previous properties

There are many properties of animation, but we usually use animation co-writing form. Animation can achieve many, many things.

The instance

Implement a running animation. I found a picture of continuous action randomly from the Internet, and I found this one. After I did it, I found that the size of each frame should be the same, and the amplitude of action is not too much. The more frames, the more decomposed, the better the animation effect.

Our implementation idea is to make an action as a frame, frame by frame to the box, as long as the connection is smooth, and your picture many frames, the effect is very good.

Effect: MY grasp is not very good.

Code:

<body>
    <div class="main">
        <img src="./pace.png">
    </div>

</body>
<style>
    .main {
        width: 240px;
        height: 460px;
        border: 1px solid red;
        overflow: hidden;
        position: relative;
    }

    img {
        position: absolute;
        top: 0;
        animation: name 1.2 s steps(10) infinite;
    }

    @keyframes name {
        from {
            left: 0;
        }
        to {
            left: -950px; }}</style>

Copy the code

😉 😉 😉 😉 😉 😉