728x90
SMALL
animation is an effect that can change attributes over time.
Used with @keyframes.
animation property
| animation-name: The animation effect must be named and the command set in @keyframes will be executed. animation-duration: Sets how many seconds the animation effect will run, the time it takes to start and end. animation-delay: Sets whether the animation effect will be executed after a few seconds. animation-timingfunction: Sets the speed at which the animation is applied. animation-direaction: Set the direction of animation. animation-iteration-count: Sets the number of times the animation iterates. animation-play-state: You can stop or start the animation. animation-fill-mode: Set the state value before and after the start of animation. |
animation-timingfunction specifies the speed at which the animation is applied.
| transition-timing-function: linear;-> Grade transition-timing-function: ease;-> Start late, then fast and then slow again transition-timing-function: ease-in;-> Faster transition-timing- function: ease-in-out;-> slow start and end transition-timing-function: ease-out;-> slower |
animation-diraction is a property that sets the direction of animation.
| animation-diraction: normal;-> Plays the animation forward to-> from by default. animation-diraction: alternate;-> Play forward with to-> from-> to. animation-diraction: reverse;-> Play from-> to in the opposite direction. animation-diraction: alternate-reverse;-> Play from-> to-> form in the opposite direction. |
animation-iteration-count is an attribute that sets the number of times the animation is repeated.
| animation-iteration-count: 1;-> The default is 1, and when you enter a number, the animation will be played only for the entered number. animation-iteration-count: infinite;-> The animation effect will be infinitely iterated. |
animation-play-state is an attribute that allows you to stop or start an animation.
| animation-play-state: running;-> Plays the animation by default. animation-play-state: paused;-> Pause the animation. |
animation-fill-mode sets the state values before and after the start of the animation.
| animation-fill-mode: none; Wait without applying the style set for start. It returns to the state before the animation was executed and ends. animation-fill-mode: forwards; Wait without applying the style set for start. The animation will end as it is. animation-fill-mode: backwards; Apply the style you set to start and wait. It returns to the state before the animation was executed and ends. animation-fill-mode: both; Apply the style you set to start and wait. The animation will end as it is. It is a method to input the animation effect in one line. animation: name, duration, timing-function, delay, interation-count, direction, fill-mode, play-state animation: sunday 5s 2s infinite alternate; The name of the animation is sunday, after a 2 second delay, it repeats infinitely for 5 seconds and plays at 0%-> 100%-> 0%. |
<body>
<h1>Animation effect</h1>
<p>css animation effect.</p>
</body>
<style>
*{margin:0; padding:0;}
li{list-style: none;}
body{margin:20px; font:20px "Arial", Gulim;}
p{width:50px; height:50px; padding:10px; background:#c00; color:#fff; font-size:20px;
animation:sunday 5s 2s infinite alternate;
-webkit-animation:sunday 5s infinite alternate;
-moz-animation:sunday 5s infinite alternate;
-o-animation:sunday 5s infinite alternate;
-ms-animation:sunday 5s infinite alternate;}
@keyframes sunday{
10%{background:#c00; width:50px; height:50px;}
25%{background:#c0c; width:100px; height:150px;}
45%{background:#f1c5d1; width:450px; height:120px;}
60%{background:#c7254e; width:450px; height:180px;}
80%{background:#FFFFAF; width:140px; height:180px;}
100%{background:#93CC8D; width:140px; height:120px;}
}
</style>Animated result screen.
animation: sunday 4s 2 alternate-reverse;
Animation name: sunday, repeated twice for 4 seconds, played forn-> to-> from.
<body>
<div>animation</div>
</body>
<style>
*{margin:0; padding:10px;}
div{width:100px; height:100px; color:#fff; background-color:red; position:relative;
animation:sunday 4s 2 alternate-reverse;}
@keyframes sunday{
0% {background-color:#c0c; left:0px; top:0px;}
25% {background-color::#FFFFAF; left:200px; top:0px;}
50% {background-color:#f1c5d1; left:200px; top:200px;}
75% {background-color:#c7254e; left:0px; top:200px;}
1000% {background-color:#93CC8D; left:0px; top:0px;}
}
</style>animation: box_ani 5s linear infinite alternate running;
Animation name: box_ani, constant velocity for 5 seconds, repeats infinitely. Set to-> from-> to..box: hover {animation-play-state: paused;
Hover your mouse over a div with an animation effect in progress and it will stop for a while.
<body>
<div class="box">animation</div>
</body>
<style>
*{margin:0; padding:10px;}
.box{width:150px; height:150px; color:#fff; background:red;
animation:box_ani 5s linear infinite alternate running;}
/*animation-duration:5s;
animation-timing-function: linear;
animation-delay:0;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state: running;*/
.box:hover{animation-play-state: paused;}
@keyframes box_ani{
0%{background:red; transform:translate(0,0) scale(0.3,0.3) rotate(0deg);}
10%{background:orange;}
20%{background:yellow;}
30%{background:green;}
40%{background:blue; transform:translate(150px, 20px) scale(1,1) rotate(180deg);}
70%{background:navy; transform:translate(50px,70px) scale(0.7,0.7) rotate(270deg);}
100%{background:red; transform:translate(0,0) scale(0.3,0.3) rotate(0deg);}
}
</style>
728x90
LIST
'CSS' 카테고리의 다른 글
| [CSS] CSS / Basics / Grammar (0) | 2022.07.27 |
|---|---|
| [CSS] How to apply CSS to HTML (0) | 2022.07.27 |
| [CSS] table-layout / fixed table size (0) | 2022.07.27 |
| [CSS] Switching transition properties such as transition animation (0) | 2022.07.25 |
| [CSS] animation Various effect application practice! (0) | 2022.07.25 |