Transform, Transition, animation속성

CSS

Transform, Transition, animation속성

jennyiscoding 2022. 8. 26. 02:01

1. Transform속성

1) rotate
2) scale
3) skew

4) translate - 움직이는것

적용 :

      .classnamehere{
      transform: translate(100px, 200px)
      }

prefix접두사를 사용한다면?

      .translate{
      -webkit-transform:translate(100px,200px);
         -moz-transform:translate(100px,200px);
         -ms-transform:translate(100px,200px);
         -o-transform:translate(100px,200px);      }

문제) 200px 200px 초록색 박스에 마우스를 올리면 width가 2초동안 400px로 변하는 코드를 css 만드시오

<!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>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="parent">
      <p>안눙하세요</p>
    </div>
  </body>
</html>

답 :

.parent {
  width: 200px;
  height: 200px;
  background-color: green;
  transition: width 2s;
}
.parent:hover {
  width: 400px;
}

2. animation

속성 :

- animation-name:
- animation-duration:
- animation-timing-function:
- animation-delay:
- animation-iteration-count:
- animation-direction:

animation-direction 3가지는?

- alternate
- normal
- reverse

문제 ) 아래 코드에 keyframes를 적용해서 width가 300px에서 600px으로 변하는 코드를 작성하시오

animation-name:changeWidth;
animation-duration:3s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:6;
animation-direction:alternate;

답 )

.parent {
  width: 200px;
  height: 200px;
  background-color: green;
  animation: changeWidth 1s linear 1s 6 alternate;
}
@keyframes changeWidth {
  0% {
    width: 200px;
  }
  100% {
    width: 400px;
  }
}