Transition is the process of applying an animation effect in different ways over a period of time.
The default format is:
transition: property duration timingfunction delay;
transition property
| transition-property: Enter the properties that create the desired animation. (color, background-color, border-radius, position ....) transition-duration: Sets how many seconds the animation effect will be executed, and the time from start to finish in milliseconds (ms) and seconds (s). transition-timingfunction: Specifies the speed at which the animation is applied (linear, ease (default), ease-in, ease-out, ease-in-out) transition-duration: Sets whether the animation effect will work after a few seconds. |
| 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 effect when creating div .s1 and raising the mouse
| transition-property: transform, background; transition-duration: 0.5s; transition-delay: 1s; transition-timing-function: ease-in; |
After raising the mouse, 1 second later, it moves 300px to the x-axis while becoming faster and faster for 0.5 seconds,
I changed the wallpaper to pink.
<body>
<div class="s1"></div>
</body>
<style>
div.s1{transform:translateX(0); width:200px; height:200px; border:1px solid red;
transition-property:transform, background;
transition-duration:0.5s;
transition-delay:1s;
transition-timing-function: ease-in;}
div.s1:hover{transform:translateX(300px); background:pink}
</style>result screen with transition effect applied
How to create a transition property in one line. If you do not specify a value, it defaults to the value.
transition: all 2s ease-out 1s;
I created all the attributes that have animation effects to gradually slow down after 2 seconds and 1 second, move 300px to the x-axis, and change the wallpaper and border-radius.
If you enter all without creating attributes such as transition: all-> transform, background, border-radius, etc.
The effect is displayed for all properties.
<body>
<div class="s2"></div>
</body>
<style type="text/css">
div.s2{transform:translateX(0); width:200px; height:200px; background:#FFFFAF;
transition:all 2s ease-out 1s; /* property duration function delay */
-webkit-transition:all 2s ease-out 1s;
-moz-transition:all 2s ease-out 1s;
-ms-transition:all 2s ease-out 1s;
-o-transition:all 2s ease-out 1s;}
div.s2:hover{transform:translateX(300px); background:#93CC8D; border-radius:50%;}
</style>result screen with transition effect applied
simply create and use only the required attributes as in the code below. (duration value is required)
.s1{
transition:all 2s /* property duration (timingfunction기본값 ease) */
}'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] animation effect (@keyframes) (0) | 2022.07.25 |
| [CSS] animation Various effect application practice! (0) | 2022.07.25 |