Article directory
foreword
CSS3 provides a very convenient animation effect. Mainly used animation (animation) attribute and @keyframes rules. Let's introduce animation and @keyframes and how to use them
提示：以下是本篇文章正文内容，下面案例可供参考
One, animation (animation) attribute
grammar
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Value and description (original link)
2. @keyframes rules
Definition and Usage
With the @keyframes rule, you can create animations.
Animations are created by gradually changing one set of CSS styles into another.
During the animation, you can change this set of CSS styles multiple times.
Specify when the change occurs as a percentage, or via the keywords "from" and "to", which are equivalent to 0% and 100%.
0% is the start time of the animation, 100% is the end time of the animation.
For best browser support, you should always define 0% and 100% selectors.
Note : Please use the animation properties to control the appearance of the animation and bind the animation to the selector.
grammar
@keyframes animationname {
keyframes-selector {
css-styles;}}
Value and description (original link)
3. Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: heart 0.5s infinite;//一个叫heart的动画 每隔0.5s执行动画 无限次
}
@keyframes heart{
0%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
QQ screen recording 20220505155643
Summarize
This is the end of the sharing, the key to the animation effect of css is the animation (animation) attribute and the use of @keyframes. If this sharing is helpful to you, please remember to like or comment for feedback! ! ! Thanks