Jam's story

[CSS] 애니메이션 효과 본문

WEB/CSS

[CSS] 애니메이션 효과

애플쩀 2022. 5. 26. 16:53

한 스타일에서 다른 스타일로 점차적으로 변환되는 것.

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation
  • 첫 단계: @keyframes 키프레임을 지정

키프레임 - 특정 시간에 요소가 가지는 스타일

 

속성 예제 

 

 

 

4초동안 점차적으로 빨->노  애니메이션 효과 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    div#ani{
        width: 100px;
        height: 100px;
        background: red;

        /* animation-name: 에 keyframe 이름을 써준다. ; */
        animation-name: example;
        animation-duration: 4s;
    }
/*     제일 먼저해야하는것 keyframe 지정 
    하나하나 스타일들을 만드는것 */ 
    @keyframes example{ 
	from{
		background-color:red;
	}
	to{
		background-color: yellow;
	}
}
</style>
</head>
<body>
    <h3>애니메이션 효과 </h3>
    <pre>
        한 스타일에서 다른 스타일로 점차적으로 변환되는 것.

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
첫 단계: @keyframes 키프레임을 지정
키프레임 - 특정 시간에 요소가 가지는 스타일
    </pre>


    <div id="ani"></div>
</body>
</html>
Document

애니메이션 효과 

        한 스타일에서 다른 스타일로 점차적으로 변환되는 것.

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
첫 단계: @keyframes 키프레임을 지정
키프레임 - 특정 시간에 요소가 가지는 스타일

 

 

0%: form        100%: to


@keyframes example{ 
	0%{
		background-color:red;
	}
	100%{
		background-color: yellow;
	}
}

 

@keyframes example{ 
	0%{	background-color:red;}
    25%{background-color: green;}
    50%{background-color: blue;}
    75%{background-color: red;}
	100%{background-color: yellow;}
}

 

 

이렇게 이동하기 위해서는 position을 absolute나 relative로 바꿔줘야 한다. 

@keyframes example{ 
	0%{	background-color:red; left:0 ; top: 0;}
    25%{background-color: green; left: 200px; top: 0;}
    50%{background-color: blue; left: 200px; top: 200px;}
    75%{background-color: red; left: 0; top: 200px;}
	100%{background-color: yellow; left: 0; top: 0;}
}

 

 

 

animation-fill-mode
Document

애니메이션 효과 

        한 스타일에서 다른 스타일로 점차적으로 변환되는 것.

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
첫 단계: @keyframes 키프레임을 지정
키프레임 - 특정 시간에 요소가 가지는 스타일

 

애니메이션이 재생되지 않을때 (시작전, 종료후 )
       그 요소에 스타일을 지정
마지막 키프레임의 스타일 유지 
        forwards, backwards, both, none
 
 forwards 지정--마지막키프레임 스타일로 돌아감 
 
Document

애니메이션 효과 

        한 스타일에서 다른 스타일로 점차적으로 변환되는 것.

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
첫 단계: @keyframes 키프레임을 지정
키프레임 - 특정 시간에 요소가 가지는 스타일

backwards 지정  -첫번째 키프레임 스타일로 돌아감 

Document

애니메이션 효과 

        한 스타일에서 다른 스타일로 점차적으로 변환되는 것.

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
첫 단계: @keyframes 키프레임을 지정
키프레임 - 특정 시간에 요소가 가지는 스타일
저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 미디어타입  (0) 2022.05.27
[CSS] css 애니메이션 -로딩이미지처리 ,이미지 흔들기  (0) 2022.05.27
[CSS] 2D, 3D 변환 transform, translate  (0) 2022.05.26
[CSS] 2D 변환  (0) 2022.05.26
[CSS] 웹글꼴  (0) 2022.05.26
'WEB/CSS' Related Articles more
Comments