HTML&CSS

css태그정리:transition등_210402(금)

docc 2021. 7. 21. 23:31

#transition

서서히 변하는 애니메이션 효과.

☆속성

*transition-property: 대상 설정

-none | all | 특정대상

​

*transition-duration:진행 시간

​

*transition-timing-fuction: 속도감

linear:

-ease-in: 느리게 시작

-ease-out:느리게 끝

​

*transition-delay:지연시간(시작전 지연시간)

 

#animation

@keyframes 속성

-from: 시작점

-to: 끝점

-50%: 중간점(%로 지정가능)

​

@keyframes 이름{

from(직접 지정가능){

시작모양

}

to(직접 지정가능){

끝모양

}

}

애니메이션을 설정하고

- animation-name: (keyframes 의)이름

지정시 애니메이션 사용가능

​

☆속성

- @keyframes

- animation-name:이름

- animation-duration:실행 시간

- animation-delay: 시작 시간

- animation-direction:종료후 ,처음부터 아님 역방향으로 진행할지 지정

- animation-iteration-count:반복 횟수

- animation-timing-function:키프레임의 전환 형태를 지정

- animation: 위의 속성값 다 지정가능

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!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>
  <script src="js/prefixfree.min.js"></script>
  <style>
    body {
      display: flex;
      flex-flow: column wrap;
    }
 
    section {
      margin: 20px;
    }
 
    div {
      width: 200px;
      height: 200px
    }
 
    .container {
      border: 1px solid black;
      perspective: 300px;
      margin-top: 100px;
      margin-left: 100px;
      float: left;
    }
 
    .box {
      background-color: blue;
      transform: rotateY(135deg);
    }
 
    #back1 {
      backface-visibility: hidden;
    }
 
    #back2 {
      backface-visibility: visible;
    }
 
    #ex1 {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      border: 1px solid gray;
      transition-property: width, height, background-color, transform;
      transition-duration: 2s, 3s, 2s, 3s;
      transition-timing-function: ease-in-out;
    }
 
    #ex1:hover {
      background-color: rgb(23, 14, 99);
      width: 200px;
      height: 120px;
      transform: rotate(180deg);
    }
 
    #out {
      position: relative;
      width: 500px;
      height: 200px;
      margin: 0 auto;
      border: 1px solid gray;
      border-radius: 30px;
      padding: 20px;
    }
 
    #out:hover .box1 {
      transform: rotate(720deg);
      margin-left: 250px;
    }
 
    .box1 {
      position: relative;
      width: 60px;
      height: 60px;
      margin-bottom: 10px;
      background-color: wheat;
      border: 1px solid gray;
    }
 
    #no-delay {
      transition-duration: 3s;
    }
 
    #delay {
      transition-duration: 3s;
      transition-delay: 1s;
    }
 
    #ani1 {
      width: 200px;
      height: 200px;
      background-color: indianred;
      animation-name: change-shape;
      animation-duration: 2s;
    }
 
    @keyframes change-shape {
      form {
        background-color: lightseagreen;
        border: 1px solid black;
      }
 
      to {
        background-color: magenta;
        border-radius: 50%;
      }
    }
    
  </style>
</head>
 
<body> 
 
  <section>
    <div id="out">
      <div id="ani1"></div>
    </div>
  </section>
  <section>
    <div class="container">
      <div class="box" id="back1">
        <h1>Back</h1>
      </div>
    </div>
    <div class="container">
      <div class="box" id="back2">
        <h1>Back</h1>
      </div>
    </div>
  </section>
 
  <section>
    <div class="box" id="ex1"></div>
  </section>
 
  <section>
    <div id="out">
      <div id="no-delay" class="box1">
        <p>no-delay</p>
      </div>
      <div id="delay" class="box1">
        <p>delay</p>
      </div>
    </div>
  </section>
 
</body>
 
</html>
 cs