Comment implémenter une animation qui disparaît après quelques secondes en CSS3-tutoriel CSS-php.cn

Comment implémenter une animation qui disparaît après quelques secondes en CSS3

WBOY

Libérer： 2021-12-16 14:27:11

original

7675 Les gens l'ont consulté

Méthode : 1. Utilisez l'instruction "@keyframes name {99%{opacity:1;}100%{opacity:0;}}" pour définir l'animation de disparition de l'élément ; 2. Utilisez l'instruction "Element {animation-duration : time}" instruction Définissez la durée d'animation de l'élément animé, et l'élément disparaîtra après l'heure.

Comment implémenter une animation qui disparaît après quelques secondes en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment réaliser l'animation de disparition après quelques secondes en css3

En css, si vous souhaitez réaliser l'animation de disparition après quelques secondes, vous devez utiliser l'attribut animation et la règle @keyframes pour obtenir l'effet de disparition de l'image après quelques secondes, grâce aux règles d'images clés @, vous pouvez créer des animations.

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Contrôlez le style de disparition de l'élément en utilisant l'attribut opacité.

L'exemple est le suivant :

<!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>
        div{
          width:150px;
          height:100px;
            opacity:0;
            background-color:red;
            animation-name:fadenum;
            animation-duration:3s;
        }
        @keyframes fadenum{
          0%{opacity:1;}
          99%{opacity:1;}
          100%{opacity:0;}
}
    </style>
</head>
<body>
<div></div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment implémenter une animation qui disparaît après quelques secondes en CSS3