Image Image Image Image Image Image Image Image Image Image

Блог SiteRX.ru | 04.11.2017

Наверх

Наверх

10 Комментариев

Девять простых примеров CSS3 анимации

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.

Для более детального ознакомления вы можете скачать архив с файлами.

Загрузить архив RAR

 
Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover, который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

body > div {
  width: 500px;
  height: 309px;
  background: #6d6d6d;
  -webkit-transition: all 0.3s ease;;
  -moz-transition: all 0.3s ease;;
  -o-transition: all 0.3s ease;;
  transition: all 0.3s ease;
}

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

.color:hover {
  background:#53ea93;
}

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:

.border:hover {
  box-shadow: inset 0 0 0 23px #53ea93;
}

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes swing {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.swing:hover {
  -webkit-animation: swing 0.6s ease;
  animation: swing 0.6s ease;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
}

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6:

.fade {
  opacity: 1;
}

.fade:hover {
  opacity: 0.6;
}

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2). При этом блок увеличится на 20 процентов с сохранением своих пропорций:

.grow:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7). Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

.shrink:hover {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
}

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius, использованного в паре с :hover и transition, это можно реализовать без проблем:

.circle:hover {
  border-radius: 70%;
}

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform, но уже с другим значением — rotateZ(20deg). При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

.rotate:hover {
  -webkit-transform: rotateZ(20deg);
  -ms-transform: rotateZ(20deg);
  transform: rotateZ(20deg);
}

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

.threed:hover {
  box-shadow:
    1px 1px #53ea93,
    2px 2px #53ea93,
    3px 3px #53ea93,
    4px 4px #53ea93,
    5px 5px #53ea93,
    6px 6px #53ea93,
    7px 7px #53ea93;
  -webkit-transform: translateX(-7px);
  transform: translateX(-7px);
}

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-)
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-)
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-)
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit-)
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit-)
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform, box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.


Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Комментарии

  1. Богдан Ромашко

    Спасибо. Полезно.

  2. 3-й вариант — свинг — напомнил форму авторизации у вордпресс, если ввести туда неправильный логин/пароль )

  3. Игорь

    Неплохо, но у меня все движения резкие, нет плавности, как поправить?

    • Убедитесь, что вы задали значение свойству transition-duration (в нашем случае это 0.3s), а также учли кроссбраузерность.
      Пример:

      body > div {
        -webkit-transition: all 0.3s ease;;
        -moz-transition: all 0.3s ease;;
        -o-transition: all 0.3s ease;;
        transition: all 0.3s ease;
      }
      
  4. АНтон

    а какой код нужно лодить в html , а какой в css , не совсем понял

    • АНтон, Вы можете загрузить архив с файлами — там есть HTML-часть.

  5. Сергей

    3D-тень можно писать по другому более короче,не писать для каждого пикселя а написать сразу 10-20 пикселей и поставить цвет,

    • Сергей, в этом случае не будет эффекта 3D-бокса, а будет просто цветная тень от плоского прямоугольника.

      • СЕРГЕЙ

        да согласен Ваша правда 100%

  6. СЕРГЕЙ

    здравствуйте у меня на хроме Ваш код для свинга не работает, я написал свой идея такаяже, работает дергаеться,
    .swing{
    width:200px;
    height:200px;
    border:5px solid red;
    background:green;
    animation-name:qw;
    animation-duration:1s;
    }

    @keyframes qw {
    15% {

    transform: translatex(18px);
    }
    30% {
    transform: translatex(-18px);

    }
    40% {
    transform: translatex(12px);

    }
    50% {
    transform: translatez(-12px);

    }
    65% {
    transform: translatex(6px);

    }
    100% {
    transform: translatex(0);

    }
    }
    @keyframes swing {
    15% {
    transform: translatey(18px);

    }
    30% {
    transform: translatey(-18px);

    }
    40% {
    transform: translatey(12px);

    }
    50% {
    transform: translatey(-12px);

    }
    65% {
    transform: translatey(6px);

    }
    100% {
    transform: translatey(0);

    }
    }

    .swing:hover {
    animation:swing 0.7s ease;

    animation-iteration-count: 10;

    }

Оставить комментарий