Detailed explanation of animation-timing-function attribute of playback method in css3-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Detailed explanation of animation-timing-function attribute of playback method in css3

云罗郡主

Nov 20, 2018 pm 05:10 PM

This article brings you a detailed explanation of the animation-timing-function attribute of the playback method in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

animation-timing-function attribute

In CSS3, we can use the animation-timing-function attribute to set the animation playback method. The so-called "playback method" is mainly used to specify the animation in The rate during playback time. Among them, the animation-timing-function attribute is similar to the transition-timing-function attribute. You can compare, understand and remember them.

Syntax:

animation-timing-function：取值；

Description:

The animation-timing-function attribute value is the same as the transition-timing-function attribute value. There are 5 types in total, as follows:

Detailed explanation of animation-timing-function attribute of playback method in css3

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-timing-function属性</title>
    <style type="text/css">
        @-webkit-keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            border-radius:0;
            background-color:#14C7F3;
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{-webkit-animation-timing-function:linear;}
        #div2{-webkit-animation-timing-function:ease;}
        #div3{-webkit-animation-timing-function:ease-in;}
        #div4{-webkit-animation-timing-function:ease-out;}
        #div5{-webkit-animation-timing-function:ease-in-out}
    </style>
</head>
<body>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
</body>
</html>

The effect is as follows:

Detailed explanation of animation-timing-function attribute of playback method in css3

The above is the animation of the playback method in css3 -Full introduction to the detailed explanation of the timing-function attribute. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Detailed explanation of animation-timing-function attribute of playback method in css3. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:lvyestudy. If there is any infringement, please contact admin@php.cn delete

Draggin' and Droppin' in ReactApr 17, 2025 am 11:52 AM

The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd,

Fast SoftwareApr 17, 2025 am 11:49 AM

There have been some wonderfully interconnected things about fast software lately.

Nested Gradients with background-clipApr 17, 2025 am 11:47 AM

I can't say I use background-clip all that often. I'd wager it's hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis,

Using requestAnimationFrame with React HooksApr 17, 2025 am 11:46 AM

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things

Need to scroll to the top of the page?Apr 17, 2025 am 11:45 AM

Perhaps the easiest way to offer that to the user is a link that targets an ID on the element. So like...

The Best (GraphQL) API is One You WriteApr 17, 2025 am 11:36 AM

Listen, I am no GraphQL expert but I do enjoy working with it. The way it exposes data to me as a front-end developer is pretty cool. It's like a menu of

Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading IndicatorApr 17, 2025 am 11:26 AM

In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's

Various Methods for Expanding a Box While Preserving the Border RadiusApr 17, 2025 am 11:19 AM

I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.

See all articles