Всем привет!
Добавил новое видео. Посмотрим, как создаются анимации на 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);
}
}
На этом все. Жду вас в следующих видео и статьях!
