Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BFTrick/5542139 to your computer and use it in GitHub Desktop.
Save BFTrick/5542139 to your computer and use it in GitHub Desktop.
CSS to add animation to a feature using the WooThemes Features plugin. You still need to write the animations.
.features .feature {
position: relative;
}
.features .animation {
content: " ";
display: none;
position: absolute;
}
.features *:hover .animation {
display: block;
}
.features .animation-1 {
-webkit-animation: fadeInRight 2s linear infinite;
-moz-animation: fadeInRight 2s linear infinite;
-o-animation: fadeInRight 2s linear infinite;
animation: fadeInRight 2s linear infinite;
background: url(/wp-content/uploads/2013/03/blast-small.png) no-repeat;
height: 62px;
left: 102px;
top: 43px;
width: 22px;
}
.features .animation-2 {
-webkit-animation: fadeInRightDelay 2s linear infinite;
-moz-animation: fadeInRightDelay 2s linear infinite;
-o-animation: fadeInRightDelay 2s linear infinite;
animation: fadeInRightDelay 2s linear infinite;
background: url(/wp-content/uploads/2013/03/blast-large.png) no-repeat;
height: 99px;
left: 115px;
top: 23px;
width: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment