Home > Article > Web Front-end > How to make an image keep rotating in css3
Method: 1. Use the "img{animation: name time infinite}" statement to bind animation to the picture; 2. Use the "@keyframes name {100%{transform:rotate(rotation angle)}}" statement Set the rotation action of animation to achieve the effect of continuous rotation of the picture.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
In css, you can use the animation attribute to bind animation to an element. The animation attribute can control the duration and number of animations. The syntax is:
animation: name duration timing-function delay iteration-count direction;
The attribute value iteration-count defines how many times the animation should be played. When set to infinite, the animation will play forever.
Then use the @keyframes rule and transform:rotate to set the rotation action of the animation.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img{
width:100px;
height:100px;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<img src="1118.01.png" alt="">
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to make an image keep rotating in css3. For more information, please follow other related articles on the PHP Chinese website!