CSS3 변환 및 애니메이션

47959 단어 CSS3프런트엔드
과도 초식
  • 과도: 원소가 한 스타일에서 다른 스타일로 바뀌었을 때 원소에 추가된 효과
  • 이벤트를 트리거해야 전환 가능
    • 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 50px auto;
            transition: width 2s;
        }
        .box:hover{
            width: 500px; background: orange;
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>

    과도 4대 요소
  • transition-property: css의 속성 이름을 제어해야 합니다.기본값:all(모든 속성은 과도 효과를 획득);필요 없음
  • transition-duration: 과도를 완성하는 데 필요한 시간;기본값은 0이고 단위는 초 또는 밀리초이며 1000ms=1s입니다.필수
  • transition-timing-function: 과도 효과의 시간 곡선을 정의한다.필수 ease 아님: 기본값;느린 속도로 시작하고 빨라지며 느린 속도로 끝낸linear: 균일한 속도;규정은 같은 속도로 시작하여 끝날 때까지 ease-in: 규정은 느린 속도로 시작하여 ease-out: 규정은 느린 속도로 끝날 때 ease-in-out: 규정은 느린 속도로 시작하고 끝날 때 cubic-bezier(n, n, n, n): cubic-bezier 함수에서 사용자 정의 값;가능한 값은 0에서 1 사이의 값입니다
    • .
  • transition-delay: 전환의 지연 시작 시간을 정의합니다. 기본값은 0이고 단위는 초 또는 밀리초
    • 입니다.
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 50px auto;
            /*     css    */
            transition-property: width, height, background;
            /*           */
            transition-duration: 2s;
            /*         */
            /* transition-timing-function: linear;            transition-timing-function: linear;
            transition-timing-function: ease;
            transition-timing-function: ease-in;
            transition-timing-function: ease-out;
            transition-timing-function: ease-in-out; */

            /*           */
            transition-delay: 1s, 2s, 3s;

        }
        .box:hover{
            width: 500px; height: 200px;
            background: orange;
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>

    전환 약자
    방식 1
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 50px auto;
            /*     */
            transition: all 2s linear 1s;
            transition: 2s linear 1s;
            transition: 2s 1s;
            transition: 2s;
        }
        .box:hover{
            width: 500px; height: 200px;
            background: orange;
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>

    방식 2
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 50px auto;
            /*     */
            transition:width 2s linear 1s, 
                       height 3s ease 2s,
                       background 4s ease 3s;

        }
        .box:hover{
            width: 500px; height: 200px;
            background: orange;
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>

    애니메이션 생성
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 100px auto;
            /*      */
            animation: Big 5s;
        }

        /* @keyframes name:         ，        */
        @keyframes Big{
            /*          */
            form{
                width: 100px; height: 100px; background: red;
            }
            /*          */
            to{
                width: 200px; height: 200px; background: orange;
            }
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>

    비율로 애니메이션 생성
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 10px auto;
            /*      */
            animation: Big 5s;
        }

        /* @keyframes name:         ，        */
        @keyframes Big{
           /*         */
           /*                  */
           0%{width: 100px; height: 100px; background: red;}
           50%{width: 150px; height: 170px; background: orangered;}
           100%{width: 200px; height: 200px; background: pink;}

        }
    style>
head>
<body>
    <div class="box">div>
body>
html>

    애니메이션 바인딩 및 설정
    애니메이션 바인딩 구문: animation:
  • 와 과도문법이 비슷하다
  • 재생 횟수: 기본적으로 1회;infinite: 무제한 재생
  • 번갈아 재생: 기본값은normal이고 번갈아 재생alternate이며 재생 횟수가 있어야 합니다
  • 마지막 상태 유지: forwards
    • 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 10px auto;
            /*      */
            /* animation: Big 2s 2; */
            /* animation: Big 2s infinite; */
            /* animation: Big 2s 2 alternate; */
            animation: Big 2s forwards;
        }

        /* @keyframes name:         ，        */
        @keyframes Big{
           /*         */
           /*                  */
           0%{width: 100px; height: 100px; background: red;}
           50%{width: 150px; height: 170px; background: yellow;}
           100%{width: 200px; height: 200px; background: pink;}
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>

    애니메이션 재생 및 일시정지
    문법: animation-play-state: running | paused
  • 애니메이션 재생running 또는 정지paused를 규정한다.기본값은 running
    • 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: red;
            margin: 10px auto;
            animation: Big 5s;
            animation-play-state: paused;
        }
        .box:hover{
            animation-play-state: running;
        }

        @keyframes Big{
           0%{width: 100px; height: 100px; background: red;}
           50%{width: 150px; height: 170px; background: yellow;}
           100%{width: 200px; height: 200px; background: pink;}
        }
    style>
head>
<body>
    <div class="box">div>
body>
html>

    변환 및 애니메이션의 차이점
  • 전환은 이벤트 트리거가 필요하고 애니메이션은 이벤트 트리거가 필요하지 않습니다
  • 변환은 시작-끝만 있고 애니메이션은 여러 키프레임
    • 을 설정할 수 있습니다.
    css3 위조 클래스의 UI 요소 상태 관련
    JavaScript로 나만의 ToDo 앱을 만드세요!

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage