About CSS3 animation to achieve frame-by-frame animation effect-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

About CSS3 animation to achieve frame-by-frame animation effect

不言

Jun 20, 2018 pm 05:19 PM

animationcss

This article mainly introduces CSS3 animation to achieve frame-by-frame animation effect, which has certain reference value. Interested friends can refer to it

The animation attribute in css3 is very powerful, but you can use it yourself Relatively few, I just happened to be asked about it in an interview recently. I will make a short summary of animation while I have time now. At the same time, a demo of frame-by-frame animation is implemented as an exercise

List of animation attributes

Because there are many animation attributes, it is a bit painful to see it in w3c, so I just did it. A map, if you want to check it later, it will be clear at a glance

Use animation to achieve frame-by-frame animation

Be familiar with the properties of animation After that, I have to find a simple small project to implement. Frame-by-frame animation is so interesting. Let’s run one to satisfy myself first. The idea is very simple, which is to give the element a sprite background, and then add the frame animation to change the background-position. Key code:

@keyframes run{   
    from{   
        background-position: 0 0;   
    }   
    to{   
        background-position: -1540px 0 ;   
    }   
}   
p{   
    width:140px;   
    height:140px;   
    background: url(run.png) ;   
    animation-name：run;   
    animation-duration:1s;   
    animation-iteration-count:infinite;   
}

But after running, we found that the frame animation between each frame of animation is sliding, which is not what we want. effect, why?

It turns out that animation transitions in ease mode by default, which inserts tweening animation between each key frame, so the animation effect is consistent
It’s easy to solve if you know the reason. The solution is:

@keyframes run{   
    0%, 8%{  /*动作一*/  }   
    9.2%, 17.2%{  /*动作二*/  }   
    ...   
}

step1: Stay 8 frames between actions, set action one at 0%, end action one at 8%

step2: Transition between actions for 1.2 frames, set action two at 9.2%, action two Ended at 17.2%

Full code:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css3逐帧动画</title>  
    <style>  
    @keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    @-webkit-keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    p{   
        width:140px;   
        height:140px;   
        background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;   
        animation:run 1s infinite;   
            -webkit-animation:run 1s infinite;   
        animation-fill-mode : backwards;   
            -webkit-animation-fill-mode : backwards;   
    }   
    </style>  
</head>  
<body>  
    <p></p>  
</body>  
</html>

There is another implementation method, which is to use steps(), which is the step animation between frames , this is not written in w3c, let me post a picture first

As can be seen from the above picture:

steps(1,start): Animation 1 Jump to 100% from the beginning until the end of this frame (not the entire cycle)

steps(1,end): Maintain the 0% style until the end of this frame (not the entire cycle)

You can also Directly set animation-timing-function: step-start/step-end

The step-start effect is equivalent to steps(1,start), and the step-end effect is equivalent to steps(1,end)

Finally The effect, because the recording problem may be a bit laggy, interested students can directly copy the code and run it:

Full code:

<!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>css3逐帧动画</title>  
        <style>  
        @keyframes run{   
            0%{   
                background-position: 0 0;   
            }   
            8.333%{   
                background-position: -140px 0;   
            }   
            16.666%{   
                background-position: -280px 0 ;   
            }   
            25.0%{   
                background-position: -420px 0 ;   
            }   
            33.333%{   
                background-position: -560px 0 ;   
            }   
            41.666%{   
                background-position: -700px 0 ;   
            }   
            50.0%{   
                background-position: -840px 0 ;   
            }   
            58.333%{   
                background-position: -980px 0 ;   
            }   
            66.666%{   
                background-position: -1120px 0 ;   
            }   
            75.0%{   
                background-position: -1260px 0 ;   
            }   
            83.333%{   
                background-position: -1400px 0 ;   
            }   
            91.666%{   
                background-position: -1540px 0 ;   
            }   
            100%{   
                background-position: 0 0 ;   
            }   
        }   
        @-webkit-keyframes run{   
            0%{   
                background-position: 0 0;   
            }   
            8.333%{   
                background-position: -140px 0;   
            }   
            16.666%{   
                background-position: -280px 0 ;   
            }   
            25.0%{   
                background-position: -420px 0 ;   
            }   
            33.333%{   
                background-position: -560px 0 ;   
            }   
            41.666%{   
                background-position: -700px 0 ;   
            }   
            50.0%{   
                background-position: -840px 0 ;   
            }   
            58.333%{   
                background-position: -980px 0 ;   
            }   
            66.666%{   
                background-position: -1120px 0 ;   
            }   
            75.0%{   
                background-position: -1260px 0 ;   
            }   
            83.333%{   
                background-position: -1400px 0 ;   
            }   
            91.666%{   
                background-position: -1540px 0 ;   
            }   
            100%{   
                background-position: 0 0 ;   
            }   
        }   
        p{   
            width:140px;   
            height:140px;   
            background: url(754767/201606/754767-20160601000042992-1734972084.png) ;   
            animation:run 1s steps(1, start) infinite;   
                -webkit-animation:run 1s steps(1, start) infinite;   
        }   
        </style>  
    </head>  
    <body>  
        <p></p>  
    </body>

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS3 box-reflect to create a reflection effect

About the animation attribute in CSS Instructions

The above is the detailed content of About CSS3 animation to achieve frame-by-frame animation effect. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

@keyframes vs CSS Transitions: What is the difference?May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

Using Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AM

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &

The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles