Enjoy Programming

Transitions 본문

CSS

Transitions

LEETAEEON 2021. 3. 25. 13:05

# transition : 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 것

  • transition 속성은 state가 없는 요소에 있어야 함.

 

developer.mozilla.org/ko/docs/Web/CSS/transition

 

transition - CSS: Cascading Style Sheets | MDN

transition transition: margin-left 4s; transition: margin-left 4s 1s; transition: margin-left 4s ease-in-out 1s; transition: margin-left 4s, color 1s; transition: all 0.5s ease-out; transition: inherit; transition: initial; transition: unset; 이 속성에

developer.mozilla.org

예제 >

<style>

      a {

        color: white;

        background-color: tomato;

        text-decoration: none;

        padding: 3px 5px;

        border-radius: 5px;

        font-size: 50px;

        transition: background-color 10s ease-in-out;

      }

      a:hover {

        color: tomato;

        background-color: wheat;

      }

    </style>

  </head>

  <body>

    <a href="#">Go Home</a>

  </body>

 

a요소에 hover state를 주고 글자색과 배경색을 반전시키는 코드.

이때 a요소에 transition을 주고 배경색만 10초 동안 천천히 변경되도록 설정.

gif를 못 만든다..ㅎㅎ 해보면 글자색은 즉시 변경 배경은 transition 효과 적용됨.

 

transition: background-color 10s ease-in-out, color 5s ease-in-out;

이렇게 여러 개의 속성도 적용이 가능하다.

 

만약 state가 적용된 모든 속성에 transition을 적용시키고 싶으면

transition: all 5s ease-in-out;

이렇게 작성해주면 된다

 

명심하자 state에 속성이 있어야 transition이 적용된다 transition에만 속성을 적으면 아무 쓸모가 없다.

또 transition은 state가 적용된 곳에 쓰는게 아니고 요소가 처음 생겨난 root element에 써야한다.

 

# ease-in function

브라우저에게 애니메이션이 어떻게 변하는지 알려주는 기능.

matthewlein.com/tools/ceasert

 

Ceaser - CSS Easing Animation Tool - Matthew Lein

Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them

matthewlein.com

it's COOL~~~ 다 적용해 볼 수 있다. 눈으로 보니 이해가 간다.

 

#cubic-bezier

또 하나의 다른 property 매우 강력하다. 나만의 가속, 감속을 만들 수 있다.

 

transition: all 500ms cubic-bezier(0.405, 0.96, 0.695, 0.345);

'CSS' 카테고리의 다른 글

Animations @keyframes  (0) 2021.03.25
Transformation  (0) 2021.03.25
css에서 전역변수  (0) 2021.03.25
:: selector (pseudo selectors)  (0) 2021.03.25
states (pseudo selecotrs)  (0) 2021.03.25
'CSS' Related Articles more