Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Animation Timing Function in CSS3
WhatsApp
Mahak Gupta
4y
11k
0
0
100
Article
a.rar
Introduction
It specifies the speed curve of the animation. The animation-timing-function uses a mathematical function, called the Cubic Bezier curve, to make the speed curve.
Syntax
animation-timing-function: value;
It has five values: linear, ease, ease-in, ease-out, ease-in-out. Here we discuss all the values of animation-timing-function.
linear:
In this case, the animation has the same speed from start to end.
ease:
This is the default value. In this case, the animation has a slow start, then fast, before it ends slowly.
ease-in:
In this case, the animation has a slow start.
ease-out:
In this case, the animation has a slow end.
ease-in-out:
In this case, the animation has both a slow start and a slow end.
<html>
<head>
<style type=
"text/css"
>
div {
width: 50px;
height: 50px;
background: pink;
color: black;
font-weight: bold;
position: relative;
animation: myfirstmove 5s infinite;
-webkit-animation: myfirstmove 5s infinite;
/* Safari and Google Chrome */
}
#div1 {
animation-timing-
function
: linear;
}
#div2 {
animation-timing-
function
: ease;
}
#div3 {
animation-timing-
function
: ease-
in
;
}
#div4 {
animation-timing-
function
: ease-out;
}
#div5 {
animation-timing-
function
: ease-
in
-out;
}
/* The following Code is for Safari and Google Chrome: */
#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;
}
@keyframes myfirstmove {
from {
left: 10px;
}
to {
left: 250px;
}
}
@-webkit-keyframes myfirstmove
/* Safari and Google Chrome */
{
from {
left: 10px;
}
to {
left: 250px;
}
}
</style>
</head>
<body>
<div id=
"div1"
>My</div>
<div id=
"div2"
>Name</div>
<div id=
"div3"
>is</div>
<div id=
"div4"
>Mahak</div>
<div id=
"div5"
>Gupta</div>
</body>
</html>
Animation Timing Function
Animation Timing Function in CSS3
CSS3
Up Next
Ebook Download
View all
Frontend Developer Interview Questions and Answers
Read by 986 people
Download Now!
Learn
View all
Membership not found