154 lines
2.4 KiB
CSS
154 lines
2.4 KiB
CSS
/*
|
|
==============================================
|
|
CSS3 ANIMATION CHEAT SHEET
|
|
==============================================
|
|
|
|
Made by Justin Aguilar
|
|
|
|
www.justinaguilar.com/animations/
|
|
|
|
Questions, comments, concerns, love letters:
|
|
justin@justinaguilar.com
|
|
==============================================
|
|
*/
|
|
|
|
.slideUp{
|
|
animation-name: slideUp;
|
|
-webkit-animation-name: slideUp;
|
|
|
|
animation-duration: 1s;
|
|
-webkit-animation-duration: 1s;
|
|
|
|
animation-timing-function: ease;
|
|
-webkit-animation-timing-function: ease;
|
|
|
|
visibility: visible !important;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
0% {
|
|
transform: translateY(100%);
|
|
}
|
|
50%{
|
|
transform: translateY(-8%);
|
|
}
|
|
65%{
|
|
transform: translateY(4%);
|
|
}
|
|
80%{
|
|
transform: translateY(-4%);
|
|
}
|
|
95%{
|
|
transform: translateY(2%);
|
|
}
|
|
100% {
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideUp {
|
|
0% {
|
|
-webkit-transform: translateY(100%);
|
|
}
|
|
50%{
|
|
-webkit-transform: translateY(-8%);
|
|
}
|
|
65%{
|
|
-webkit-transform: translateY(4%);
|
|
}
|
|
80%{
|
|
-webkit-transform: translateY(-4%);
|
|
}
|
|
95%{
|
|
-webkit-transform: translateY(2%);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.pulse{
|
|
animation-name: pulse;
|
|
-webkit-animation-name: pulse;
|
|
|
|
animation-duration: 1.5s;
|
|
-webkit-animation-duration: 1.5s;
|
|
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(0.9);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(0.9);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(0.95);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(0.95);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/*
|
|
==============================================
|
|
floating
|
|
==============================================
|
|
*/
|
|
|
|
.floating{
|
|
animation-name: floating;
|
|
-webkit-animation-name: floating;
|
|
|
|
animation-duration: 1.5s;
|
|
-webkit-animation-duration: 1.5s;
|
|
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes floating {
|
|
0% {
|
|
transform: translateY(0%);
|
|
}
|
|
50% {
|
|
transform: translateY(8%);
|
|
}
|
|
100% {
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes floating {
|
|
0% {
|
|
-webkit-transform: translateY(0%);
|
|
}
|
|
50% {
|
|
-webkit-transform: translateY(8%);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0%);
|
|
}
|
|
}
|
|
|