'@keyframes'에 해당되는 글 2건

@keyframes

2020/CSS 2020. 3. 24. 11:46
반응형

2개 이상의 애니메이션 중간 상태(프레임)을 지정할 때 사용합니다.


/*
@keyframes name{
0%{ 속성 : 값 }
50% { 속성 : 값}
100%{ 속성 : 값}
}
*/

@keyframes moveBox{
0% { left : 100px;}
100% { top: 200px;}
}

 

.box{
width: 100px;
height: 100px;
background : blue;
}

.box:hover{
animation: myAni 3s infinite alternate;
/*
animation-name: myAni;
animation-duration: .3s;
*/
@keyframes myAni{
0% { width : 100px;
background: yellowgreen;} 
100% { width: 300px;
background: red}
}
반응형
저작자표시

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

animation-iteration-count, animation-direction  (0) 2020.03.24
animation-timing-function  (0) 2020.03.24
CSS: transform 3D 변환 함수  (0) 2020.03.23
CSS : transform 2D 변형효과  (0) 2020.03.23
text-indent  (0) 2020.03.23
블로그 이미지

꽃꽂이하는개발자

,

css animation @keyframes

2020/CSS 2020. 2. 16. 18:52
반응형
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Transformations</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background: red;
      /*animation: 1회동작시간 함수명 동작시간(안적어주면 1회) ease-in-out;*/
      animation: 1.5s scaleAndRotateSquare infinite ease-in-out;
    }
    /*@keyframes 애니메이션을 사용할 거라는 말. @keyframes 함수명{}
    2가지 버전이 있는데 from to 를 사용해도 되고  0% 50% 100% 를 사용하여도 됩니다.*/
    /*@keyframes scaleAndRotateSquare {
      from{
      }
      to{
      }
    }*/
    @keyframes scaleAndRotateSquare {
      0%{
        transform:none;
      }
      50%{
        transform: rotate(1turn) scale(.5, .5);
        color:white;
      }
      100%{
        transform: none;
        color:blue;
      }
    }
  </style>
</head>
<body>
  <div class="box">11</div>
</body>
</html>

출처: nomad coder

반응형
저작자표시

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

페이지에서 색상 변경 가능, 사이즈 확인 site  (0) 2020.02.17
css media queries  (0) 2020.02.16
CSS Transformations  (0) 2020.02.16
CSS Transition  (0) 2020.02.16
css states(hover, active, focus, visited)  (0) 2020.02.16
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2025/01   »
일 월 화 수 목 금 토
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

티스토리툴바