CSS 3 animations, создаем прикольную анимацию

Всем привет!

Добавил новое видео. Посмотрим, как создаются анимации на CSS3 на примере простой иконки. Под видео продублирую код.

 

Наш HTML для иконки и анимации выглядит следующим образом:

<body>
  <div class="icon-container">
    <div class="icon"></div>
    <div class="circle-left"></div>
    <div class="circle-right"></div>
  </div>
</body>

 

CSS для элементов

body {
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background: white;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  box-shadow: 0 10px 5px 0 rgba(0,0,0,0.05);
}

.icon {
  position: relative;
  z-index: 2;

  background: url('time.svg') 50% 50% no-repeat;
  background-size: contain;

  width: 120px;
  height: 120px;

  animation: rotateIcon .5s infinite alternate ease-in-out;
}

.circle-left,
.circle-left:before {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 10px;
  left: 20px;
}

.circle-right,
.circle-right:before {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 10px;
  right: 20px;
}

.circle-left:before,
.circle-right:before {
  background: white;
}

.circle-left {
  animation: xLeft 1s infinite both ease-in-out;
}

.circle-right {
  animation: xRight 1s infinite both ease-in-out;
  animation-delay: -.5s;
}

.circle-left:before {
  animation: yLeft 1s infinite both ease-in-out;
}

.circle-right:before {
  animation: yRight 1s infinite both ease-in-out;
  animation-delay: -.5s;
}

 

Сами анимации приведены ниже. Помните, что если вам нужна широкая поддержка браузеров, то вам так же нужно задать анимации с префиксами @-webkit-keyframes, @-moz-keyframes, @-o-keyframes.

Так же при задании анимаций элементам нужно прописывать:

#box {
  -webkit-animation: YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

На этапе сборки просто частенько препроцессоры CSS сами добавляют нужные префиксы.

А теперь сами наши анимации:

@keyframes rotateIcon {
  0% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(-10deg);
  }
}

@keyframes xLeft {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(-100px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes xRight {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes yLeft {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-150px) scale(.1);
  }
}

@keyframes yRight {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-150px) scale(.1);
  }
}

 

На этом все. Жду вас в следующих видео и статьях!

Автор статьи: Alex. Категория: CSS
Дата публикации: 13.11.2020