Maison > Article > interface Web > Comment implémenter une animation de rotation en CSS3

Comment implémenter une animation de rotation en CSS3

青灯夜游original: 2021-12-16 15:13:297838parcourir

Méthode d'implémentation : 1. Utilisez l'instruction "@keyframes animation name {50% {transform: rotate(rotation angle);}" pour créer une animation de rotation ; 2. Utilisez l'"element {animation: animation name time infinite;} " instruction pour faire pivoter L'animation est appliquée à l'élément spécifié.

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

css3 implémente une animation de rotation

1 Si vous souhaitez utiliser CSS3 pour implémenter une animation, vous devez utiliser l'attribut d'animation et la règle "@keyframes".

@keyframes est une règle de CSS3 qui peut être utilisée pour définir le comportement d'un cycle d'animations CSS et créer des animations simples.
Les animations sont similaires aux transitions dans la mesure où elles sont des représentations de l'évolution des propriétés CSS au fil du temps. La principale différence est que la transition est déclenchée implicitement lorsque la valeur de la propriété change (par exemple, lorsque la valeur de la propriété change au survol), mais l'animation est exécutée explicitement lorsque la propriété animée est appliquée. Par conséquent, les animations doivent afficher des valeurs explicites pour les propriétés animées. Ces valeurs sont définies par les images clés d'animation spécifiées dans la règle @keyframes. Par conséquent, la règle @keyframes consiste en un ensemble de règles de style CSS encapsulées qui décrivent comment les valeurs des propriétés changent au fil du temps.
Ensuite, en utilisant différentes propriétés d'animation CSS, vous pouvez contrôler de nombreux aspects différents de l'animation, notamment le nombre d'itérations de l'animation, si elle alterne entre les valeurs de début et de fin et si l'animation doit s'exécuter ou être mise en pause. Les animations peuvent également retarder leur heure de début.
Syntaxe :

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

2. Utilisez transform: rotate(旋转角度) dans la règle "@keyframes" pour contrôler l'action de rotation.

Code d'implémentation :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: pink;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Comment implémenter une animation de rotation en CSS3

(Partage vidéo 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que sont les images clés en CSS3Article suivant：Que sont les images clés en CSS3

Articles Liés

Voir plus