CSS Animations for the Pixel Perfect Webinar
.home .products .product .price { | |
opacity: 0; | |
} | |
.home .products .product:hover .price { | |
-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; | |
animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; | |
} | |
/* ---------------------------------------------- | |
* Generated by Animista on 2018-3-22 10:24:52 | |
* w: http://animista.net, t: @cssanimista | |
* ---------------------------------------------- */ | |
/** | |
* ---------------------------------------- | |
* animation fade-in-bottom | |
* ---------------------------------------- | |
*/ | |
@-webkit-keyframes fade-in-bottom { | |
0% { | |
-webkit-transform: translateY(50px); | |
transform: translateY(50px); | |
opacity: 0; | |
} | |
100% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
opacity: 1; | |
} | |
} | |
@keyframes fade-in-bottom { | |
0% { | |
-webkit-transform: translateY(50px); | |
transform: translateY(50px); | |
opacity: 0; | |
} | |
100% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
opacity: 1; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment