119 lines
2.5 KiB
CSS
119 lines
2.5 KiB
CSS
.motion-test-1 {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
position: relative;
|
|
animation-name: color-move;
|
|
animation-duration: 4s;
|
|
animation-iteration-count: infinite; /* can be left off to run once, specify a number as desired or inifinite */
|
|
animation-direction: alternate; /* can be left off for forward, reverse, alternate (forward then reverse), alternate-reverse (reverse then forward) */
|
|
}
|
|
|
|
.motion-test-2 {
|
|
width: 100px;
|
|
height: 50px;
|
|
background-color: red;
|
|
position: relative;
|
|
animation: from-to 5s; /* combines multiple animation options together for shorthand (name, duration, timing, delay, interations, direction)*/
|
|
animation-iteration-count: infinite; /* can be left off to run once, specify a number as desired or inifinite */
|
|
animation-direction: alternate; /* can be left off for forward, reverse, alternate (forward then reverse), alternate-reverse (reverse then forward) */
|
|
}
|
|
|
|
.dot {
|
|
height: 3em;
|
|
width: 3em;
|
|
background-color: #bbb;
|
|
border-radius: 50%; /*this makes the circle*/
|
|
border: 3px solid blue;
|
|
display: inline-block;
|
|
position: relative;
|
|
animation: 3s ease-in infinite percent ;
|
|
}
|
|
|
|
|
|
#linear {
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
#ease {
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
#ease-in {
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
#ease-out {
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
#ease-in-out {
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
/* from-to pattern where from is 0% and to is 100% can only have these two options */
|
|
@keyframes from-to {
|
|
from {
|
|
left: 0px;
|
|
}
|
|
|
|
to {
|
|
left: 300px;
|
|
}
|
|
}
|
|
|
|
/* % pattern where each line denotes the starting percent of the style */
|
|
@keyframes percent {
|
|
0% {
|
|
background-color: red;
|
|
border: .25em solid green;
|
|
}
|
|
|
|
50% {
|
|
background-color: yellow;
|
|
border: .75em solid blue;
|
|
}
|
|
|
|
100% {
|
|
background-color: red;
|
|
border: .25em solid green;
|
|
}
|
|
}
|
|
/* uses pixel postions from 0,0 being top-left corner to move the element around
|
|
NEEDS: "position: relative;" on element to work
|
|
*/
|
|
@keyframes color-move {
|
|
0% {
|
|
background-color: red;
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
25% {
|
|
background-color: yellow;
|
|
left: 200px;
|
|
top: 0px;
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
50% {
|
|
background-color: blue;
|
|
left: 200px;
|
|
top: 200px;
|
|
transform: scale(2);
|
|
}
|
|
|
|
75% {
|
|
background-color: green;
|
|
left: 0px;
|
|
top: 200px;
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
background-color: red;
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
}
|