How to achieve image disappearing animation effect in css3-Front-end Q&A-php.cn

How to achieve image disappearing animation effect in css3

青灯夜游

Release： 2022-03-18 16:19:47

Original

4540 people have browsed it

Implementation method: Use the "@keyframes animation name {}" rule and the "opacity: transparency;" statement to create a picture disappearing animation; 2. Use "picture element {opacity: 0; animation: animation name time 1; }" statement can be used to apply the picture disappearing animation to the picture element.

How to achieve image disappearing animation effect in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, you can use the animation attribute, "@keyframes" rule, and opacity attribute to achieve the image disappearing animation effect.

@keyframes is a rule of CSS3 that can be used to define the behavior of a period of CSS animation and create simple animations.

Use @keyframes to define the action of the animation; then, using different CSS animation properties, you can control many different aspects of the animation, including the number of animation iterations, whether to alternate between start and end values, and whether the animation should run or be paused. Animations can also delay their start time.

The opacity attribute controls the transparency of an element.

Implementation code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			@keyframes mymove {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}

			@-webkit-keyframes mymove{ /* Safari and Chrome */
			
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			img {
				opacity: 0;
				animation: mymove 3s 1;
				/* Safari and Chrome */
				-webkit-animation: mymove 3s 1;
			}
		</style>
	</head>
	<body>

		<img  src="img/1.jpg"    style="max-width:90%" / alt="How to achieve image disappearing animation effect in css3" >

	</body>
</html>

Copy after login

How to achieve image disappearing animation effect in css3

(Learning video sharing: css video tutorial, web front-end）

The above is the detailed content of How to achieve image disappearing animation effect in css3. For more information, please follow other related articles on the PHP Chinese website!