Анимация в CSS

<!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>Навбар</title>
    <style>
        body {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100vh;
            background-color: #78a8bc;
            overflow: hidden;
            margin: 0;
        }
        .navbar {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .item-1, .item-2, .item-3 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: cornsilk;
            font-weight: bold;
            font-size: 2em;
            padding: .75em;
            width: 100%;
            transition: all ease .5s;          
        }
        .item-1:hover, .item-2:hover, .item-3:hover {
            width: 200%;
        }        
        .item-1 {
            background-color: #131e1d;
        }
        .item-2 {
            background-color: #974c18;
        }
        .item-3 {
            background-color: #ddb067;
        }     
    </style>
</head>

<body>
<div class="navbar">
    <div class="item-1">
        Новости
    </div>
    <div class="item-2">
        Картинки
    </div>
    <div class="item-3">
        Информация
    </div>
</div>
</body>

</html>

<!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>Анимация</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #78a8bc;
            overflow: hidden;
            margin: 0;
        }
        .container {
            font-size: 1em;
            color: white;
            animation: slideIn forwards 1s ease-in-out;
        }
        @keyframes slideIn {
            80% {
                font-size: 3em;
                padding: 2em;
            }
            100% {
                padding: 1.85em;
                font-size: 2.75em;
                background-color: darkslateblue;
                border-radius: 5px;
            }
        }
    </style>
</head>

<body>
<div class="container">
    Привет мир!
</div>
</body>

</html>

<!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>Анимация</title>
    <style>
        body {
            height: 100vh;
            background-color: #43dde6;
            overflow: hidden;
            margin: 0;
        }

        span {
            position: absolute;
            left: -25px;
            top: 50%;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #faee1c;
        }

        span:nth-child(1) {
            animation: fly 8s 3.75s ease-in-out infinite;
        }
        span:nth-child(2) {
            animation: fly 12s 1.75s ease-in-out infinite;
        }
        span:nth-child(3) {
            animation: fly 18s .75s ease-in-out infinite;
        }
        span:nth-child(4) {
            animation: fly 11s 7.75s ease-in-out infinite;
        }
        span:nth-child(5) {
            animation: fly 7s 2.25s ease-in-out infinite;
        }
        span:nth-child(6) {
            animation: fly 5s 4.75s ease-in-out infinite;
        }
        @keyframes fly {
            0% {
                left: -25px;
                top: 50%;
            }
            25% {
                top: 40%;
            }
            50% {
                top: 55%;
            }
            75% {
                top: 35%;
            }
            100% {
                left: 100%;
                top: 50%;
            }
        }
    </style>
</head>

<body>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</body>

</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
        .heart { font-size: 100px; animation: beat 1s infinite; }
        @keyframes beat {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <div class="heart">❤️</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .loader {
            width: 60px;
            height: 60px;
            border: 8px solid #eee;
            border-top-color: #6d4aff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="loader"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        body { height: 100vh; margin: 0; font-family: sans-serif; background: linear-gradient(#ffd23f, #ff4d8d); }
        .btn { border: 0; color: white; padding: 16px 32px; font-size: 18px; border-radius: 30px;
               background: linear-gradient(to right, #6d4aff, #19b8a6); }
    </style>
</head>
<body>
    <h1>Градиенты</h1>
    <button class="btn">Красивая кнопка</button>
</body>
</html>