Comment implémenter une animation de rotation en CSS3-tutoriel CSS-php.cn

Comment implémenter une animation de rotation en CSS3

青灯夜游

Libérer： 2021-12-16 15:13:29

original

7849 Les gens l'ont consulté

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é.

Comment implémenter une animation de rotation en CSS3

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 ...
}

Copier après la connexion

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>

Copier après la connexion

Comment implémenter une animation de rotation en CSS3