154 lines
2.4 KiB
Plaintext
154 lines
2.4 KiB
Plaintext
|
/*
|
||
|
==============================================
|
||
|
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%);
|
||
|
}
|
||
|
}
|
||
|
|