Home > Article > Web Front-end > How to achieve enlargement and rotation animation effect in css3
How to achieve enlargement and rotation animation effect in css3
- 青灯夜游Original
- 2021-12-15 16:48:424091browse
Method: 1. Use the animation attribute to bind animation to the element; 2. Use "@keyframes animation name {50%{width: the enlarged width value; height: the enlarged height value; transform:rotate(rotate Angle);}}" statement controls the action of the animation to achieve enlargement and rotation.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css3 realizes the enlargement and rotation animation effect
In HTML, you can use the animation attribute and "@keyframes" to create an element to enlarge Rotating animation. Use the width and height attributes in animation to control element enlargement; transform:rotate() controls element rotation.
Implementation code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 50px;
height: 50px;
background: red;
margin: 100px;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove {
50% {
width: 150px;
height: 150px;
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
50% {
width: 100px;
height: 100px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve enlargement and rotation animation effect in css3. For more information, please follow other related articles on the PHP Chinese website!