[XML] CSS에서 animation 속성

Animation 이란 ? ? ?

엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다.

 

 

 

예제를 살펴보기 전 @keyframe 을 살펴봅시다.

애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 합니다.

키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시합니다.

 

 

 

이제 예제를 살펴봅시다.

WebDesign{
    animation: left-right 2s infinite alternate;
}
@keyframes left-right{
    from{
        transform: translate(0, 0)
    }
    to{
        transform: translate(300px, 0);
        color: lightgray;
        background: hotpink;
        border: 1px solid gray;
        text-shadow: 2px 2px 0px white;
        box-shadow: 2px 2px 50px orange;
    }
}

✓ border: X → grey

✓ font-shadow: X → white

✓ font-color: white → gray

✓ box-shadow: X → orange

✓  location of X: 0px→ 300px

✓ background-color: light pink → hot pink

 

 

WebDesign{
    display: block;
    height: 45px;
    width: 65px;  
    color: blue;
    background-color:yellow;
    border: 1px solid black;
    margin: 25px;
    margin-top: 60px;
    text-align: center;
    font-weight: bold;
    animation: l-r 7s infinite;
}
@keyframes l-r {
    from {  
        transform: translate(0,0);
    } 25% {
        transform:translate(400px,0);
        height: 65px;
        width: 65px;  
        border-radius: 50%;
        border: 1px solid green;
        background-color: lightgray;
        color: red;
    } 50% {
        transform:translate(400px,100px);
        height: 65px;
        width: 65px;  
        border-radius: 50%;
        border: 1px solid green;
        background-color: chartreuse;
        color: black;
    } 75% {
        transform:translate(0, 100px);
        border-radius: 10%;
        border: 1px solid green;
        background-color: green;
        color: purple;
    } to {
        transform:translate(0,0)
    }
}

 

✓ border:   1px solid black  →  1px solid green

✓ radius:   0%  →  50%  →  50%  →  10 %  →  0%

✓  location of Box: (0, 0) →  (400, 0)  →  (400, 100)  →  (0, 100)  →  (0, 0)

✓ background-color:  yellow →   yellow  →  lightgrey  →  chartreuse  →  green

 

 

 

 

Animation 속성의 특징

Attributes	Explaination
animation	모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
animation-name	애니메이션 효과의 이름을 설정
animation-duration	애니메이션 효과를 재생할 시간을 설정
animation-delay	애니메이션 효과가 나타나기까지의 지연 시간을 설정
animation-iteration-count	애니메이션 효과가 몇 번 반복될지를 설정
animation-direction	애니메이션의 진행 방향을 설정
animation-timing-function	애니메이션 효과의 시간당 속도를 설정
animation-fill-mode	애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정
animation-play-state	애니메이션 효과의 재생 상태를 설정

 

 

 

hover와 animation의 차이점을 알아봅시다.

hover을 마우스가 박스 위에 올라갔을 때 움직임이 시작하지만

animation은 웹페이지가 시작하면 움직임이 바로 시작됩니다.

 

 

hover - 1

WebDesign{
    transition: width 2s, height 2s, tranform 2s;
}
WebDesign:hover{
    width: 200pt;
    height: 30pt;
    color: red;
    font-size: 10pt;
    font-weight: bold;
    border: 0.4px solid red;
    background-color: azure;
    box-shadow: 5px 8px 1px blue;
}

✓ 마우스를 박스에 올리면 속성이 바뀝니다.

✓ width:  100pt  →  200pt

✓ height:  origin  →  30pt

✓ font-color:  white  →  red

✓ font-size:  origin  →  10pt

✓ font-weight:  origin  →  bold

✓ border:  origin  →  solid (red color)

✓ background-color:  light pink  → azure

✓ box shadow:  2px 2px hotpink  → 5px 8px 1px blue

 

 

 

hover - 2

WebDesign{
    transition: transform 0.01s;
}
WebDesign:hover{
    background-color: yellow;
    border-top: solid 10px blue;
    border-right: solid 8px  blue;
    border-bottom: solid 4px blue;
    border-left: solid 2px  blue;
    transform: skew(-15deg , -10deg); 
    color: purple;
    text-shadow: 3px 3px 1px green;
    font-weight: bold;
}

✓ 마우스를 박스에 올리면 속성이 바뀝니다.

✓ background-color:  chartreuse  → yellow

✓ border-top:  solid 10px  purple  →  solid 10px blue

✓ border-left:  solid 2px  purple  →  solid 2px blue

✓ border-right:  solid 8px  purple  →  solid 8px blue

✓ border-bottom:  solid 4px  purple  →  solid 4px blue

✓ skew:  skew(20deg)  →  skew(-15deg, -10deg)

✓ font-shadow:  X  →  3px 3px 1px green

✓ font-color:  black  →  purple

✓ font-weight:  X → bold

 

 

 

 

 

 

◡̈