CSS | Анимации

Опубликовано: 1 Марта, 2022

Что такое CSS-анимация?
CSS-анимация - это метод изменения внешнего вида и поведения различных элементов на веб-страницах. Он используется для управления элементами путем изменения их движения или отображения. Он состоит из двух частей: одна содержит свойства CSS, которые описывают анимацию элементов, а другая содержит определенные ключевые кадры, которые указывают на свойства анимации элемента и конкретные временные интервалы, в которые они должны происходить.

Правило @keyframes: ключевые кадры - это основа, на которой работает CSS-анимация. Они определяют отображение анимации на соответствующих этапах всей ее продолжительности. Например: в следующем коде абзац меняет цвет со временем. При завершении 0% он красный, при завершении 50% - оранжевый, а при полном завершении, т.е. при 100% - коричневый.

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #gfg {
                animation-name: color;
                animation-duration: 25s;
                padding-top:30px;
                padding-bottom:30px;
                font-family:Times New Roman;
            }
            #geeks {
                font-size: 40px;
                text-align:center;
                font-weight:bold;
                color:#090;
                padding-bottom:5px;
            }
            #geeks1 {
                font-size:17px;
                font-weight:bold;
                text-align:center;
            }
            @keyframes color {
                0% {
                    background-color: red;
                }
                50% {
                    background-color: orange;
                }
                100% {
                    background-color: brown;
                }
            }
        </style>
    </head>
    <body>
        <div id = "gfg">
            <div id = "geeks">GeeksforGeeks</div>
            <div id = "geeks1">A computer science portal for geeks</div>
        </div>
    </body>
</html>                                                              

Выход:

Animation Properties: There are certain animation properties given below:

  • animation-name: It is used to specify the name of the @keyframes describing the animation.
    animation-name: animation_name;
  • animation-duration: It is used to specify the time duration to takes animation to complete one cycle.
    Example:
    <html>
        <head>
            <style>
                #gfg1 {
                    animation-name: text;
                    animation-duration: 5s;
                    animation-iteration-count: infinite;
                      
                }
                #geek1 {
                    font-size: 40px;
                    text-align:center;
                    font-weight:bold;
                    color:#090;
                    padding-bottom:5px;
                }
                #geek2 {
                    font-size:17px;
                    font-weight:bold;
                    text-align:center;
                }
                @keyframes text {
                      
                    from {
                          
                        margin-top: 400px;
                    }
                    to {
                        margin-top: 0px;
                    }
                }
            </style>
        </head>
        <body>
            <div id = "gfg1">
                <div id = "geek1">GeeksforGeeks</div>
                <div id = "geek2">A computer science portal for geeks</div>
            </div>
        </body>
    </html>                                                             

    Output:

  • animation-timing-function: Specifies how the animation makes transitions through keyframes. It can have the following values:
    • ease: The animation starts slowly, then fast, and then finally ends slowly (this is default)
    • linear: The animation plays with the same speed from start to end
    • ease-in: The animation plays with a slow start
    • ease-out: The animation plays with a slow end
    • ease-in-out: The animation starts and ends slowly.

    Example:

                            <!DOCTYPE html>
    <html>
        <head>
            <style>
                .geeks {
                    font-size: 40px;
                    text-align:center;
                    font-weight:bold;
                    color:#090;
                    padding-bottom: 5px;
                    font-family:Times New Roman;
                }
                .geeks1 {
                    font-size:17px;
                    font-weight:bold;
                    text-align:center;
                    font-family:Times New Roman;
                }
                h2 {
                    width: 350px;
                    animation-name: text;
                    animation-duration: 4s;
                    animation-iteration-count: infinite;
                    background-color: rgb(255, 210, 85);
                }
                #one {
                    animation-timing-function: ease;
                }
                #two {
                    animation-timing-function: linear;
                }
                #three {
                    animation-timing-function: ease-in;
                }
                #four {
                    animation-timing-function: ease-out;
                }
                #five {
                    animation-timing-function: ease-in-out;
                }
                @keyframes text {
                    from {
                        margin-left: 60%;
                    }
                    to {
                        margin-left: 0%;
                    }
                }
            </style>
        </head>
        <body>
            <div class = "geeks">GeeksforGeeks</div>
            <div class = "geeks1">A computer science portal for geeks</div>
            <h2 id="one">This text is ease.</h2>
            <h2 id="two">This text is linear.</h2>
            <h2 id="three">This text is ease-in.</h2>
            <h2 id="four">This text is ease-out.</h2>
            <h2 id="five">This text is ease-in-out.</h2>
        </body>
    </html>                    

    Output:

  • animation-delay: It is used to specify the delay when animation start.
    Example:
                            <!DOCTYPE html>
    <html>
        <head>
            <style>
                .geeks {
                    font-size: 40px;
                    text-align:center;
                    font-weight:bold;
                    color:#090;
                    padding-bottom:5px;
                    font-family:Times New Roman;
                }
                .geeks1 {
                    font-size:17px;
                    font-weight:bold;
                    text-align:center;
                    font-family:Times New Roman;
                }
                #one {
                    animation-name: example;
                    animation-duration: 10s;
                      
                }
                #two {
                    animation-name: example;
                    animation-duration: 10s;
                    animation-delay: 10s;
                }
                @keyframes example {
                    from {
                        background-color: orange;
                    }
                    to {
                        background-color: white;
                    }
                }
            </style>
        </head>
        <body>
            <div class = "geeks">GeeksforGeeks</div>
            <div class = "geeks1">A computer science portal for geeks</div>
            <h2 id="one">Text animation without delayed.</h2>
            <h2 id="two">Text animation with 10 second delay.</h2>
        </body>
    </html>                    

    Output:

  • animation-iteration-count: It is used to specify the number of times the animation will repeat. It can specify as infinite to repeat the animation indefinitely.
    Example:
                            <!DOCTYPE html>
    <html>
        <head>
            <style>
                .geeks {
                    font-size: 40px;
                    text-align:center;
                    font-weight:bold;
                    color:#090;
                    padding-bottom:5px;
                    font-family:Times New Roman;
                }
                .geeks1 {
                    font-size:17px;
                    font-weight:bold;
                    text-align:center;
                    font-family:Times New Roman;
                }
                #one {
                    animation-name: example;
                    animation-duration: 2s;
                    animation-iteration-count: 2;
                }
                #two {
                    animation-name: example;
                    animation-duration: 2s;
                    animation-iteration-count: infinite;
                }
                @keyframes example {
                    from {
                        background-color: orange;
                    }
                    to {
                        background-color: white;
                    }
                }
            </style>
        </head>
        <body>
            <div class = "geeks">GeeksforGeeks</div>
            <div class = "geeks1">A computer science portal for geeks</div>
            <h2 id="one">This text changes its color two times.</h2>
            <h2 id="two">This text changes its color infinite times.</h2>
        </body>
    </html>                                       

    Output:

  • animation-direction: Specifies the direction of the animation. It can have the following values:
    • normal: The animation is played forward. This is the default value.
    • reverse: The animation is played in the reverse direction i.e. backwards
    • alternate: The animation is played forwards first, and then backwards
    • alternate-reverse: The animation is played backwards first, and then forwards.

    Example:

                            <!DOCTYPE html>
    <html>
        <head>
            <style>
                .geeks {
                    font-size: 40px;
                    text-align:center;
                    font-weight:bold;
                    color:#090;
                    padding-bottom:5px;
                    font-family:Times New Roman;
                }
                .geeks1 {
                    font-size:17px;
                    font-weight:bold;
                    text-align:center;
                    font-family:Times New Roman;
                }
                h2 {
                    width: 100%;
                    animation-name: text;
                    animation-duration: 2s;
                    animation-iteration-count: infinite;
                }
                #one {
                    animation-direction: normal;
                }
                #two {
                    animation-direction: reverse;
                }
                #three {
                    animation-direction: alternate;
                }
                #four {
                    animation-direct
    HTML CSS

    РЕКОМЕНДУЕМЫЕ СТАТЬИ

    Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
    23 Февраля, 2023
    Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
    23 Февраля, 2023
    Как отфильтровать массив на основе пользовательского ввода в AngularJS?
    23 Февраля, 2023
    Разделение файлов в SASS
    23 Февраля, 2023
    Для чего используется директива @content?
    23 Февраля, 2023
    Как воспроизводить и приостанавливать анимацию CSS с помощью пользовательских свойств CSS?
    23 Февраля, 2023
    Чистые размеры сеток CSS
    23 Февраля, 2023
    Разница между @warn и @debug
    23 Февраля, 2023