×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

animated bg image zoom

0
0
 
0
Language: CSS
Posted by: Nicole Patten
Added: Jun 24, 2016 6:53 PM
Views: 1987
Tags: no tags
  1. -webkit-animation: animatedBackgroundOut 0.5s ease-out 1;
  2.                                 -moz-animation: animatedBackgroundOut 0.5s ease-out 1;
  3.                                 animation: animatedBackgroundOut 0.5s ease-out 1;
  4.                                 -webkit-animation-fill-mode: backwards;
  5.                                 animation-fill-mode: backwards;
  6.                                 &:hover {
  7.                                         -webkit-animation: animatedBackground 0.5s ease-out 1;
  8.                                         -moz-animation: animatedBackground 0.5s ease-out 1;
  9.                                         animation: animatedBackground 0.5s ease-out 1;
  10.                                         -webkit-animation-fill-mode: forwards;
  11.                                         animation-fill-mode: forwards;
  12.                                 }
  13.  
  14. @-webkit-keyframes animatedBackground {
  15.         0% {
  16.                 -webkit-transform: scale(1, 1);
  17.                 -moz-transform: scale(1, 1);
  18.                 -ms-transform: scale(1, 1);
  19.                 -o-transform: scale(1, 1);
  20.                 transform: scale(1, 1)
  21.         }
  22.         100% {
  23.                 -webkit-transform: scale(1.05, 1.05);
  24.                 -moz-transform: scale(1.05, 1.05);
  25.                 -ms-transform: scale(1.05, 1.05);
  26.                 -o-transform: scale(1.05, 1.05);
  27.                 transform: scale(1.05, 1.05)
  28.         }
  29. }
  30.  
  31.  
  32.         @-moz-keyframes animatedBackground {
  33.         0% {
  34.                 -webkit-transform: scale(1, 1);
  35.                 -moz-transform: scale(1, 1);
  36.                 -ms-transform: scale(1, 1);
  37.                 -o-transform: scale(1, 1);
  38.                 transform: scale(1, 1)
  39.         }
  40.         100% {
  41.                 -webkit-transform: scale(1.05, 1.05);
  42.                 -moz-transform: scale(1.05, 1.05);
  43.                 -ms-transform: scale(1.05, 1.05);
  44.                 -o-transform: scale(1.05, 1.05);
  45.                 transform: scale(1.05, 1.05)
  46.         }
  47. }
  48.        
  49. @keyframes animatedBackground {
  50.         0% {
  51.                 -webkit-transform: scale(1, 1);
  52.                 -moz-transform: scale(1, 1);
  53.                 -ms-transform: scale(1, 1);
  54.                 -o-transform: scale(1, 1);
  55.                 transform: scale(1, 1)
  56.         }
  57.         100% {
  58.                 -webkit-transform: scale(1.05, 1.05);
  59.                 -moz-transform: scale(1.05, 1.05);
  60.                 -ms-transform: scale(1.05, 1.05);
  61.                 -o-transform: scale(1.05, 1.05);
  62.                 transform: scale(1.05, 1.05)
  63.         }
  64. }
  65.  
  66. @-webkit-keyframes animatedBackgroundOut {
  67.         100% {
  68.                 -webkit-transform: scale(1, 1);
  69.                 -moz-transform: scale(1, 1);
  70.                 -ms-transform: scale(1, 1);
  71.                 -o-transform: scale(1, 1);
  72.                 transform: scale(1, 1)
  73.         }
  74.         0% {
  75.                 -webkit-transform: scale(1.05, 1.05);
  76.                 -moz-transform: scale(1.05, 1.05);
  77.                 -ms-transform: scale(1.05, 1.05);
  78.                 -o-transform: scale(1.05, 1.05);
  79.                 transform: scale(1.05, 1.05)
  80.         }
  81. }
  82.  
  83.  
  84. @-moz-keyframes animatedBackgroundOut {
  85.         100% {
  86.                 -webkit-transform: scale(1, 1);
  87.                 -moz-transform: scale(1, 1);
  88.                 -ms-transform: scale(1, 1);
  89.                 -o-transform: scale(1, 1);
  90.                 transform: scale(1, 1)
  91.         }
  92.         0% {
  93.                 -webkit-transform: scale(1.05, 1.05);
  94.                 -moz-transform: scale(1.05, 1.05);
  95.                 -ms-transform: scale(1.05, 1.05);
  96.                 -o-transform: scale(1.05, 1.05);
  97.                 transform: scale(1.05, 1.05)
  98.         }
  99. }
  100.  
  101. @keyframes animatedBackgroundOut {
  102.         100% {
  103.                 -webkit-transform: scale(1, 1);
  104.                 -moz-transform: scale(1, 1);
  105.                 -ms-transform: scale(1, 1);
  106.                 -o-transform: scale(1, 1);
  107.                 transform: scale(1, 1)
  108.         }
  109.         0% {
  110.                 -webkit-transform: scale(1.05, 1.05);
  111.                 -moz-transform: scale(1.05, 1.05);
  112.                 -ms-transform: scale(1.05, 1.05);
  113.                 -o-transform: scale(1.05, 1.05);
  114.                 transform: scale(1.05, 1.05)
  115.         }
  116. }

Write a comment

To post comments, please log in or register.