Ejemplos animaciones web con css

Ejemplos de  una animación web con css realizada online desde https://animacionesweb.online sin ningún tipo de librería anexa , solo copiar y pegar código en tu web, en esta animación hemos animado videos texto e imágenes todo con css agrupados en gráficos svg, por desgracias los exploradores no se ponen de acuerdo en el signo de los grados de giro a nivel matricial  de las animaciones dando diferencias en las animaciones dependiendo cual explorador utilicemos

En Chome se ha visualizado correctamente

Sigue nuestro blog para ver momo lo realizamos o ponte en contacto con migo será muy bien recibiditos comentarios si quiers ver mas ejemplos de animaciones web no te vallas de mi blog

Animaciones realizadas por https://animacionesweb.online blog de animaciones web https://animacionesweb.com HARRY POTTER
<svg class="img-responsive" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 1470 800 "><defs>
			
			
			<desc> Animaciones realizadas por https://animacionesweb.online </desc>
			                blog de animaciones web https://animacionesweb.com
	<defs>
			 <linearGradient id="14" gradientUnits="" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0" stop-color="rgb(255, 0, 64)"></stop><stop offset="1" stop-color="rgb(246, 206, 227)"></stop>
			
</linearGradient></defs>		
 <style id="css" type="text/css"> .a1123{
						animation-duration:20s;
						animation-delay:0s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1123;
                animation-timing-function:linear;
				animation-fill-mode:forwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1123  
						{
						
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(0,0,-1,0,0,1,0,0,1,0,0,0,704,0,1,1);
		 
		  
	 }}.a1124{
						animation-duration:20s;
						animation-delay:0s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1124;
                animation-timing-function:cubic-bezier(0.34,0.23,0.97,1);
				animation-fill-mode:forwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1124  
						{
						0.1% {
		 
		transform: matrix3d(0.3417,0,0,0,0,0.2824,0,0,0,0,0.2824,0,874,255,0.0011,1);
		 
		  
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(0,0,-0.3417,0,0,0.2824,0,0,0.2824,0,0,0,707.993,255,-165.441,1);
		 
		  
	 }}.a1126{
						animation-duration:20s;
						animation-delay:20s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1126;
                animation-timing-function:linear;
				animation-fill-mode:forwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1126  
						{
						0.1% {
		 
		transform: matrix3d(0,0,1,0,0,1,0,0,-1,0,0,0,706,0,736,1);
		 
		  
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(-1,0,0,0,0,1,0,0,0,0,-1,0,705,0,737,1);
		 
		  
	 }}.a1129{
						animation-duration:20s;
						animation-delay:20s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1129;
                animation-timing-function:cubic-bezier(0.63,0.84,0.9,0.99);
				animation-fill-mode:none;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1129  
						{
						0.1% {
		 
		transform: matrix3d(0,0,0.3487,0,0,0.5395,0,0,-0.3487,0,0,0,700.934,230,304.763,1);
		 
		  
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(-0.3487,0,0,0,0,0.5395,0,0,0,0,-0.3487,0,396.17,230,0.6966,1);
		 
		  
	 }}.a1150{
						animation-duration:40s;
						animation-delay:0s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1150;
                animation-timing-function:linear;
				animation-fill-mode:forwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1150  
						{
						0.1% {
		 
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,705,0,0,1);
		 
		  
	 }
						
						
   						
    					
    	               50% {
		
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,705,0,0,1);
		 
		  
	 }
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(0,0,1,0,0,1,0,0,-1,0,0,0,706,0,1,1);
		 
		  
	 }}.a1152{
						animation-duration:40s;
						animation-delay:0s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1152;
                animation-timing-function:linear;
				animation-fill-mode:backwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1152  
						{
						0.1% {
		 
		transform: matrix3d(1.26577,0,0,0,0,2.35795,0,0,0,0,1,0,775,543,0,1);
		 
		  
	 }
						10% {
		
		transform: matrix3d(1.39235,0,0,0,0,2.59375,0,0,0,0,1,0,751.041,538.164,0,1);
		 
		  
	 }
						20% {
		 
		transform: matrix3d(1.25311,0,0,0,0,2.33438,0,0,0,0,0.9,0,777.396,543.449,0,1);
		 
		  
	 }
   						30% {
		
		transform: matrix3d(1.37842,0,0,0,0,2.56782,0,0,0,0,0.9,0,753.676,538.653,0,1);
		  
		   
	 }
    					40% {
		
		transform: matrix3d(1.24058,0,0,0,0,2.31104,0,0,0,0,0.81,0,779.768,543.939,0,1);
		 
		  
	 }
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(0,0,1.2406,0,0,2.311,0,0,-0.81,0,0,0,706.146,543.939,75.242,1);
		 
		  
	 }}.a1153{
						animation-duration:20s;
						animation-delay:40s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1153;
                animation-timing-function:linear;
				animation-fill-mode:forwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1153  
						{
						0.1% {
		 
		transform: matrix3d(0,0,1,0,0,1,0,0,-1,0,0,0,706,0,1,1);
		 
		  
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(-1,0,0,0,0,1,0,0,0,0,-1,0,705,0,2,1);
		 
		  
	 }}.a1154{
						animation-duration:60s;
						animation-delay:0s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1154;
                animation-timing-function:linear;
				animation-fill-mode:forwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1154  
						{
						0.1% {
		 
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,705,0,0,1);
		 
		  
	 }
						
						
   						
    					
    	               
	  					60% {
		 
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,705,0,0,1);
	 
	  
	 }
						
						
  						
  						 100% {
		 
		transform: matrix3d(0,0,1,0,0,1,0,0,-1,0,0,0,706,0,1,1);
		 
		  
	 }}.a1156{
						animation-duration:20s;
						animation-delay:60s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1156;
                animation-timing-function:linear;
				animation-fill-mode:forwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1156  
						{
						0.1% {
		 
		transform: matrix3d(0,0,1,0,0,1,0,0,-1,0,0,0,706,0,1,1);
		 
		  
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(-1,0,0,0,0,1,0,0,0,0,-1,0,705,0,2,1);
		 
		  
	 }}.a1157{
						animation-duration:20s;
						animation-delay:20s;
					  animation-iteration-count: 1;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a1157;
                animation-timing-function:linear;
				animation-fill-mode:forwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a1157  
						{
						0.1% {
		 
		
		 opacity:0;
		  
	 }
						10% {
		
		
		 opacity:0.99;
		  
	 }
						20% {
		 
		
		 opacity:0;
		  
	 }
   						30% {
		
		
		  opacity:0.99;
		   
	 }
    					40% {
		
		
		 opacity:0;
		  
	 }
    	               50% {
		
		
		 opacity:0.99;
		  
	 }
	  					60% {
		 
		
	 opacity:0;
	  
	 }
						70% {
		 
		
		 opacity:0.99;
		  
	 }
						80% {
		 
		
		 opacity:0;
		  
	 }
  						90% {
		 
		
		 opacity:0.99;
		  
	 }
  						 100% {
		 
		
		 opacity:0;
		  
	 }}</style> </defs><g id="todo" style="transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)" class="a">




			<g id="b1132"> <image id="r96tapete1606850274" style="transform:matrix3d(1.73631,0,0,0,0,0.9801000000000001,0,0,0,0,0.81,0,0,0,0,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r96tapete.jpg" class="a1132" width="916" height="880" x="0" y="0" stroke-width="" stroke="none"></image></g>




			<g id="b1126"> <image id="r1223pagi1606765575" style="transform: matrix3d(-0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,-0.0000,0.0000,705.9999,0.0000,735.9999,1.0000)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r1223pagi.jpg" class="a1126" width="595" height="842" x="0" y="0" stroke-width="" stroke="none"></image></g>




			<g id="b1129"> <foreignObject id="Mivideo61606797909" requiredExtensions="http://www.w3.org/1999/xhtml " class="a1129" width="720" x="0" y="0" height="576" style="transform: matrix3d(0.0000,0.0000,0.3487,0.0000,0.0000,0.5395,0.0000,0.0000,-0.3487,0.0000,0.0000,0.0000,700.9336,230.0000,304.7632,1.0000)">
				<g xmlns="http://www.w3.org/1999/xhtml">
                <video autoplay="autoplay" loop="loop" muted="muted" preload="auto" width="720" height="576"> <source x="300" y="225" src="https://animacionesweb.online/videos/Mivideo6.mp4" type="video/mp4">  </source>   </video>
				</g>
            </foreignObject></g>




			<g id="b1154"> <image id="r1144harry1607685881" style="transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,705,0,0,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r1144harry.jpg" class="a1154" width="595" height="842" x="0" y="0" stroke-width="" stroke="none"></image></g>




			<g id="b1124"> <foreignObject id="Mivideo51606764212" requiredExtensions="http://www.w3.org/1999/xhtml " class="a1124" width="1280" x="0" y="0" height="720" style="transform: matrix3d(0.3417,0.0000,0.0000,0.0000,0.0000,0.2824,0.0000,0.0000,-0.0000,0.0000,0.2824,0.0000,874.0001,255.0000,0.0011,1.0000)">
				<g xmlns="http://www.w3.org/1999/xhtml">
                <video autoplay="autoplay" loop="loop" muted="muted" preload="auto" width="1280" height="720"> <source x="300" y="225" src="https://animacionesweb.online/videos/Mivideo5.mp4" type="video/mp4"></source>   </video>
				</g>
            </foreignObject></g>




			<g id="b1157"> <image id="r147YOharry1607705341" style="transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,945,255,0,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r147YOharry.png" class="a1157" width="150" height="176" x="0" y="0" stroke-width="" stroke="none" opacity="0"></image></g>




			<g id="b1150"> <image id="r130portada1607682337" style="transform: matrix3d(1.1,0,0,0,0,1,0,0,0,0,1,0,700,0,0,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r130portada.jpg" class="a1150" width="595" height="842" x="0" y="0" stroke-width="" stroke="none"></image></g>




			<g id="b1152">                                                                                                                                                                                                                                                                                                                                                                                                                         <g id="8HA1607683859" class="a1152" style="transform: matrix3d(0.0000,0.0000,1.2406,0.0000,0.0000,2.3110,0.0000,0.0000,-0.8100,0.0000,0.0000,0.0000,706.1460,543.9390,75.2420,1.0000)"> 
							 
			

					 
					<text x="20" y="38" font-family="Franklin Gothic" font-size="50" stroke="#08088A" font-style="normal" font-weight="bold" stroke-width="2.5" fill="url(#14)" >
					HARRY POTTER 

					</text>   

		</g>   
		</g>




			<g id="b1153"> <image id="r174Sin-título-61607685153" style="transform: matrix3d(0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,0.0000,706.0000,0.0000,1.0000,1.0000)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r174Sin-título-6.jpg" class="a1153" width="595" height="842" x="0" y="0" stroke-width="" stroke="none"></image></g>




			<g id="b1123"> <image id="r102paginaha1606763101" style="transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,705,0,0,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r102paginaha.jpg" class="a1123" width="595" height="842" x="0" y="0" stroke-width="" stroke="none"></image></g>




			<g id="b1156"> <image id="r114harry81607692335" style="transform: matrix3d(0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,0.0000,706.0000,0.0000,1.0000,1.0000)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/r114harry8.jpg" class="a1156" width="595" height="842" x="0" y="0" stroke-width="" stroke="none"></image></g> 



</g>                     
				  
               
               	 

  
 	 
	  



                </svg>		

Deja un comentario