Анимация CSS3

css
  1. ----------------------- HTML
  2. <div id="el1"></div>
  3. <div id="fishlogo"></div>
  4. <img src="http://i.imgur.com/lMOmhaM.jpg" style="width: 100%; height: 80px;max-width: 100%;" alt="">
  5. ----------------------- CSS
  6. #el1 {
  7.     margin: 0;
  8.     padding: 0;
  9.     height: 80px;
  10.     background: url("http://i.imgur.com/AO1XwVn.gif") no-repeat right 14px;
  11.     animation-name: anim1;
  12.     animation-duration: 4s;
  13.     animation-iteration-count: infinite;
  14.     -moz-animation-name: anim1;
  15.     -moz-animation-duration: 20s;
  16.     -moz-animation-iteration-count: infinite;
  17.     -webkit-animation-name: anim1;
  18.     -webkit-animation-duration: 20s;
  19.     -webkit-animation-iteration-count: infinite;
  20.     position: absolute;
  21.     opacity: .7;
  22. }
  23.  
  24. @keyframes anim1 {
  25.     from {
  26.         width: 95%;
  27.     }
  28.     to {
  29.         width: 0;
  30.     }
  31. }
  32.  
  33. @-moz-keyframes anim1 {
  34.     from {
  35.         width: 95%;
  36.     }
  37.     to {
  38.         width: 0;
  39.     }
  40. }
  41.  
  42. @-webkit-keyframes anim1 {
  43.     from {
  44.         width: 95%;
  45.     }
  46.     to {
  47.         width: 0;
  48.     }
  49. }
  50.  
  51. #fishlogo {
  52.     margin: 0;
  53.     padding: 0;
  54.     height: 55px;
  55.     background: url("http://i.imgur.com/6MLozsy.png") no-repeat 25px 23px;
  56.     animation-name: fishlogo;
  57.     animation-duration: 10s;
  58.     animation-iteration-count: infinite;
  59.     animation-timing-function: cubic-bezier(0.5, 0.3, 0.25, 0.25);
  60.     -moz-animation-name: fishlogo;
  61.     -moz-animation-duration: 10s;
  62.     -moz-animation-iteration-count: infinite;
  63.     -moz-animation-timing-function: cubic-bezier(0.5, 0.3, 0.25, 0.25);
  64.     -webkit-animation-name: fishlogo;
  65.     -webkit-animation-duration: 10s;
  66.     -webkit-animation-iteration-count: infinite;
  67.     -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0.25, 0.25);
  68.     position: absolute;
  69. }
  70.  
  71. @keyframes fishlogo {
  72.     from {
  73.         width: 25px;
  74.     }
  75.     to {
  76.         width: 250px;
  77.     }
  78. }
  79.  
  80. @-moz-keyframes fishlogo {
  81.     from {
  82.         width: 25px;
  83.     }
  84.     to {
  85.         width: 250px;
  86.     }
  87. }
  88.  
  89. @-webkit-keyframes fishlogo {
  90.     from {
  91.         width: 25px;
  92.     }
  93.     to {
  94.         width: 250px;
  95.     }
  96. }
Пример:
https://jsfiddle.net/2rdh216L/
Назад

Реклама

Мы в соцсетях

tw tg yt gt