Home > Article > Web Front-end > How to achieve flip effect twice in css3
How to achieve flip effect twice in css3
- WBOYOriginal
- 2021-12-16 10:16:571899browse
Method: 1. Use the "@keyframes name {100%{transform:rotateY(angle);}}" statement to set the animation effect of element flipping; 2. Use "Element {animation-iteration-count:2 }" statement can set the number of element animation flips to 2 times.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to achieve the effect of flipping twice in css3
In css, if you want to achieve the effect of flipping elements twice, you can use "@keyframes "Rules, animation and transform properties set the animation effect of element flipping.
At this time, the flip animation of the element will be flipped once if not set. We can use the animation-iteration-count attribute to set the number of times the element is animated.
animation-iteration-count property defines the number of times the animation is played.
The syntax is as follows:
animation-iteration-count: n|infinite;
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{
animation:fadenum 5s ;
animation-iteration-count:2;
}
@keyframes fadenum{
100%{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<img src="1115.08.png" alt="How to achieve flip effect twice in css3" >
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve flip effect twice in css3. For more information, please follow other related articles on the PHP Chinese website!