CSS - Transition :: 아빠개발자의 노트

CSS - Transition

2019. 3. 5. 09:16

Transition 트랜지션 (화면전환)

l transition-property : 엘리먼트의 효과를 함께 적용할 속성들

l transition-duration : 장면전환의 시간을 설정한다

l transition: (property | duration , property | duration) 을 함께 쓸수있다

l transition:-delay : 장면전환이 시작될때 약간의 딜레이를 주고 할수있다.

l transition:-timing-function : 장면전환이 될떄의 x,y의 시간차 전환

◎ transition-timing-function 속성

▼ 내용

안에 있는 property 중 cubic-bezier(); 안에 숫자를 입력하면 속도롤 커스텀마이징 할수있다.

https://matthewlein.com/tools/ceaser

Ceaser - CSS Easing Animation Tool - Matthew Lein

Ceaser CSS Easing Animation Tool 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 pretty. I love th...

matthewlein.com

◎ transition 과 transform 합친 예제

▼ 내용

div 크기가 줄어들면서 회전한다.

<html>
<head>
    <style>
        div{
            height:200px;
            width:200px;
            background:blue;
            color:White;
            transition: all .5s ease-in-out;
            /*모든 속성에대해 장면전환 transition 적용*/
        }
        div:hover{
            transform: rotate(5turn) scale(0.5,0.5);
            /*5번 회전 , 크기 1/2배로 줄임*/
            background-color : red;
            color : green;
        }
    
    </style>
</head>
<body>
    <body>
        <div>안녕</div>
    </body>
</body>
</html>

저작자표시 비영리 변경금지

'디자인 > CSS' 카테고리의 다른 글

CSS - Box-shadow , text-shadow (그림자효과) (0)	2019.03.05
CSS - 카카오톡 클론 코딩 (프론트단만. BY nicollas) (0)	2019.03.05
CSS - filter ,blend,접두어 (브라우저별 사용) (0)	2019.03.05
CSS - Transform (1)	2019.03.05
CSS -background (0)	2019.03.05

아빠개발자의 노트

CSS - Transition

'디자인 > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바