Animer une page web – SVG et CSS

Soyez patient, cet article / partie sera bientôt prêt ! Faites moi savoir votre impatience via les commentaires 😉

Cette article est directement inspiré d’un article sur : jackiedelia.com

Il est possible d’inclure une animation sur une page web au moins de 3 façons :

Le CSS
Le JavaScript
Le SVG

Je détaillerai quand j’aurais le temps cet article afin de donner des techniques simples pour créer un SVG animé. En attendant, voici un exemple de code avec SVG :

Aperçu

Code source

Partie HTMLPartie CSS

<div class="cog-wheels_2">
	<svg width="100%" height="100%" viewBox="0 0 600 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
		<rect x="-152" y="-117" width="882" height="819" fill="#eeeeee"></rect>
		<g>
			<circle id="circle-yellow_2" cx="393.785" cy="409.5" r="100" fill="transparent"></circle>
			<g>
				<path class="cog-yellow_2" d="M378.75,310.637c-6.476,0.985 -12.839,2.603 -18.999,4.832l0.962,15.729c-5.814,2.455 -11.337,5.551 -16.466,9.229l-12.915,-9.028c-5.115,4.091 -9.817,8.675 -14.036,13.685l8.696,13.14c-3.807,5.034 -7.042,10.476 -9.644,16.226l-15.699,-1.361c-2.385,6.101 -4.165,12.421 -5.314,18.869l14.102,7.032c-0.781,6.263 -0.861,12.593 -0.24,18.874l-14.276,6.671c0.985,6.476 2.604,12.839 4.833,18.998l15.728,-0.961c2.456,5.814 5.551,11.336 9.23,16.465l-9.028,12.915c4.091,5.116 8.674,9.818 13.684,14.037l13.141,-8.697c5.033,3.807 10.475,7.042 16.225,9.645l-1.36,15.699c6.1,2.385 12.42,4.164 18.869,5.313l7.031,-14.101c6.263,0.78 12.594,0.861 18.875,0.239l6.67,14.276c6.476,-0.985 12.84,-2.603 18.999,-4.832l-0.962,-15.729c5.814,-2.455 11.337,-5.551 16.466,-9.229l12.915,9.028c5.116,-4.091 9.817,-8.675 14.036,-13.685l-8.696,-13.14c3.807,-5.034 7.042,-10.476 9.645,-16.226l15.698,1.361c2.385,-6.101 4.165,-12.421 5.314,-18.869l-14.102,-7.032c0.781,-6.263 0.861,-12.593 0.24,-18.874l14.276,-6.671c-0.985,-6.476 -2.604,-12.839 -4.833,-18.998l-15.728,0.961c-2.456,-5.814 -5.551,-11.336 -9.23,-16.465l9.028,-12.915c-4.091,-5.116 -8.674,-9.818 -13.684,-14.037l-13.14,8.697c-5.034,-3.807 -10.476,-7.042 -16.226,-9.645l1.361,-15.699c-6.101,-2.385 -12.421,-4.164 -18.87,-5.313l-7.031,14.101c-6.263,-0.78 -12.594,-0.861 -18.875,-0.239l-6.67,-14.276ZM388.854,390.117c10.698,-2.721 21.592,3.755 24.313,14.452c2.722,10.698 -3.754,21.592 -14.452,24.314c-10.697,2.721 -21.592,-3.755 -24.313,-14.452c-2.721,-10.698 3.754,-21.592 14.452,-24.314Z" fill="#78a0d0"></path>
			</g>
		</g>
	</svg>
</div>

<style type="text/css">
	/* Wrap the SVG in a div */
	.cog-wheels_2 {
		margin: 2% auto;
		width: 500px;
		height: 500px;
	}

	/*Rotate cogs*/
	svg .cog-yellow_2 {
		transform-origin: 393.785px 409.5px;
		animation: spin 10s linear infinite;
		animation-delay: 0.8s;
	}

	@keyframes spin {
		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes spin-reverse {
		100% {
			-moz-transform: rotate(-360deg);
			-webkit-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}
</style>