@keyframes
It controls the intermediate steps in a CSS animation sequence by defining styles for keyframes along the animation sequence.
Syntax
@keyframes animationName {
from {
transform: translateX(0%);
}
{
transform: translateX(100%);
}
}
/* It can have more properties in between like below*/
@keyframes animation-name {
/* start */
0% {
styles;
}
50% {
styles;
}
/* end */
100% {
styles;
}
from: a starting offset of 0%.
to: an ending offset of 100%.
%: A percentage of the time through the animation sequence at which the specified keyframe should occur.
How to apply animation.
Using animation makes CSS effects to work and move smoothly.
animation-name
To call/play animation, you must define the name and need to use the name in @keyframes.
/* 키프레임 이름 == 애니메이션 이름 */
@keyframes move {
0% {
styles;
}
100% {
styles;
}
}
div{
/* 애니메이션 이름 */
animation-name: move;
}
rules for naming the animation.
/* [ Good example ] */
animation-name: move; /* name starts with lowercase */
animtaion-name: _move; /* name starts with (_) */
animation-name: -move; /* name starts with (-) */
animation-name: move1, move2; /* listing a few different animation-name */
/* [ Bad example ] */
animation-name: Name-move; /* name starts with uppercase */
animation-name: *-name-move; /* name starts with special character */
animation-name: 1move /* name starts with number */
animation-duration
<animation-duration> sets the length of time that an animation takes to complete one cycle. You can only use positive number for it and if you set it wit 0(zero) or negative number, it won't be executed.
/* [ Animation won't be executed ] */
animation-duration: 0; /* when the duration is 0 */
animation-duration: -3s; /* when the duration is negative number */
/* [ Animation will be executed ] */
animation-duration: 3s; /* when the duration is positive number */
animation-duration: 500ms; /* when the duration is is shorter than 1 second */
animation-iteration-count
When you execute the animation, it stops after it's played. <animation-iteration-count> sets the number of times an animation sequence should be played before stopping. Default value for this property is 1 and if it's set to 0 or negative, it won't execute. If the value is rational number like 1.5, it will go back to the first frame while it's being played and if the value is infinite, it will play the animation infinitely.
/* [ Animation won't be executed ] */
animation-iteration-count: 0; /* when count is set to 0 */
animation-iteration-count: -3; /* when count is set to negative number */
/* [ Animation will be executed ] */
animation-iteration-count: 3; /* when count is set to positive number */
animation-iteration-count: 1.5; /* when count is set to rational number */
animation-iteration-count: infinite; /* when count is set to infinite */
animation-direction
<animation-direction> sets whether an animation should play forward, backward or alternate back and forth between playing the sequence forward and backward.
animation-direction: normal; /* 순방향 재생 */
animation-direction: reverse; /* 역방향 재생 */
animation-direction: alternate; /* 순방향 시작, 순방향-역방향 번갈아 재생 */
animation-direction: alternate-reverse; /* 역방향 시작, 역방향-순방향 번갈아 재생 */
<normal>: animation plays forwards each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again.(default value)
<reverse>: animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. (Animation steps are performed backwards, and timing functions are also reversed. For example, an ease-in timing function becomes ease-out.)
<alternate>: animation reverses direction each cycle.(with the first iteration being played forwards. The count to determine if a cycle is even or odd starts at one.)
<alternate-reverse>: animation reverses direction each cycle.(with the first iteration being played backwards. The count to determine if a cycle is even or odd starts at one.)
animation-timing-function
<animation-timing-function> sets how an animation progresses through the duration of each cycle.
- ease: increases in velocity towards the middle of the animation, slowing back down at the end.
- linear: animates at an even speed.
- ease-in: starts off slowly, with the speed of the transition of the animating property increasing until complete.
- ease-out: starts quickly, slowing down the animation continues.
- ease-in-out: slowly transitioning, speeding up, and then slowing down again.
- cubic-bezier(n, n, n, n): defines a Cubic Bezier curve. A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function examples
animation-timing-function: cubic-bazier(0,25, 0.1, 0.25, 1);
animation-timing-function: linear;
animation-timing-function: cubic-bazier(0,0,1,1);
animation-timing-function: ease-in;
animation-timing-function: cubic-bazier(0.42,0,1,1);
animation-timing-function: ease-out;
animation-timing-function: cubic-bazier(0,0,0.58,1);
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bazier(0.42,0,0.58,1);
animation-delay
<animation-delay> specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.
animation-delay: 0; /* play immediately */
animation-delay: now; /* play now */
animation-delay: 1.5s; /* 1.5s delayed play */
animation-delay: -500ms; /* 지정 시간 이후 프레임부터 바로 재생 */
A negative value causes the animation to begin immediately, but partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.
animation-play-state
<animation-play-state> sets whether an animation is running or paused.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('.play').click(function () {
$('div').css('animation-play-state', 'running');
});
$('.stop').click(function () {
$('div').css('animation-play-state', 'paused');
});
});
</script>
<style>
@keyframes move {
from {
transform: translate(100px, 0);
}
to {
transform: translate(300px, 0);
}
}
div {
position: absolute;
margin: 50px;
width: 100px;
height: 100px;
background-color: #ff0000;
/* animation properties */
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<button class="play">running</button>
<button class="stop">paused</button>
<div>box</div>
</body>
</html>
animation
It can be used with shorthand, <animation>.
/* duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* name | duration | easing-function | delay */
animation: slidein 3s linear 1s
/* name | duration */
animation: slidein 3s;
animation: 3s ease-in 1s infinite reverse both running slidein;
animation: 3s linear 1s infinite running slidein;
animation: 3s linear 1s infinite alternate slidein;
animation: .5s linear 1s infinite alternate slidein;
Perspective
<perspective> is used to give a 3D positioned element some perspective. It defines how far the object is away from the user.
Lower value will result in a more intensive 3D effect than higher value. (When defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself)
.cont-card {
display: flex;
align-items: center;
justify-content: center;
perspective: 800px;
}
Links to learn more about perspective
Top comments (0)