Oxygen theme: animation of the post slider

• 

  andrsc · Member · Jul 24, 2013 at 6:27 pm

  • Copy link
  • Add topic to favorites

  How I can change the animation in the post slider from fade-in to bounce?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jul 24, 2013 at 7:22 pm

  • Copy link

  Hi there, it isn’t possible to change the post slider animation style on Oxygen at WordPress.com.

• 

  designsimply · Member · Jul 24, 2013 at 9:35 pm

  • Copy link

  You can do something like that with CSS3 animations. Note that CSS3 is new and only the newest browsers support it, so it won’t work the same in every browser.

  Here is a pretty experimental example I came up with:

  .attachment-featured-thumbnail{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}
  .attachment-featured-thumbnail{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
  @-webkit-keyframes bounce {
  	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
  	60% {-webkit-transform: translateY(-15px);}
  }
  
  @-moz-keyframes bounce {
  	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
  	40% {-moz-transform: translateY(-30px);}
  	60% {-moz-transform: translateY(-15px);}
  }
  
  @-o-keyframes bounce {
  	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
  	40% {-o-transform: translateY(-30px);}
  	60% {-o-transform: translateY(-15px);}
  }
  @keyframes bounce {
  	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  	40% {transform: translateY(-30px);}
  	60% {transform: translateY(-15px);}
  }
  
  .attachment-featured-thumbnail {
  	-webkit-animation-name: bounce;
  	-moz-animation-name: bounce;
  	-o-animation-name: bounce;
  	animation-name: bounce;
  }

  I got the code source from http://daneden.me/animate/ which is a completely awesome resource for animations.