Home > Article > Web Front-end > How to achieve the gradual hiding effect of images in css
How to achieve the gradual hiding effect of images in css
- WBOYOriginal
- 2021-12-07 09:18:404940browse
Method: 1. Use the animation attribute to bind animation to the picture element; 2. Use the "@keyframes" rule to control the animation action to achieve the gradual hiding effect. The syntax is "@keyframes animation name {0%{opacity: 1}100%{opacity:0}}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to realize the gradual hiding effect of pictures in css
In css, you can use the animation attribute and @keyframes rules to realize the animation of elements fading. Effects, through the @keyframes rule, you can create animations.
The principle of creating animation is to gradually change one set of CSS styles into another set of styles. You can change this set of CSS styles multiple times during the animation.
Specify the time when the change occurs as a percentage, or through 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.
The syntax of the animation attribute is as follows:
animation: name duration timing-function delay iteration-count direction;
where
@keyframes The syntax of the rule is as follows:
@keyframes animationname {keyframes-selector {css-styles;}}where
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3显示隐藏效果</title>
<style>
img{
animation:fadenum 5s 1;
}
@keyframes fadenum{
0%{opacity: 1;}
100%{opacity: 0;}
}
</style>
</head>
<body>
<img src="1118.02.png" alt="How to achieve the gradual hiding effect of images in css" >
</body>
</html>Output result:
(Learning video sharing : css video tutorial)
The above is the detailed content of How to achieve the gradual hiding effect of images in css. For more information, please follow other related articles on the PHP Chinese website!