Méthode : 1. Utilisez l'instruction "element {animation: name time}" pour lier l'animation à l'élément ; 2. Utilisez le "@keyframes name {50%{transform:scale(left and right scaling multiple, 1) ; }} », définit l'action d'animation de l'expansion et de la contraction de l'élément pour obtenir l'effet d'animation d'expansion et de contraction gauche et droite de l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment obtenir un effet d'animation d'étirement à gauche et à droite en CSS3
En CSS, si vous souhaitez obtenir une animation d'étirement à gauche et à droite, vous devez lier l'animation à l'élément d'image via l'attribut d'animation et spécifier l'animation temps.
Utilisez ensuite les règles d'images clés pour spécifier les actions d'animation des éléments. Les actions spécifiques sont basées sur l'attribut de transformation et la fonction d'échelle pour mettre à l'échelle les éléments.
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:100px;
height:100px;
margin:0 auto;
background-color:pink;
animation:fadenum 5s;
}
@keyframes fadenum{
50%{transform:scale(3,1);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat de sortie :
(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
