Трудность наложения чистой CSS-анимации - PullRequest
Новая
       9

Трудность наложения чистой CSS-анимации

0 голосов
/ 10 октября 2018

Я позаимствовал анимацию Венна из другого места и хотел бы разместить иконки (ионные изображения через класс CSS) внутри Венны, чтобы они анимировались в соответствии с ней.

Я перепробовал множество подходов, но самое близкое, что я дошел до успеха, это в основном запустить два набора анимаций, используя одни и те же параметры, один за другим в коде.

Хотя анимация теперь одинакова для символов и кругов CSS, они не занимают одно и то же место и поэтому не налагаются так, как я хочу.Как я могу достичь этого в рамках существующего кода?Я пробовал отступы, поля и т. Д., Но это искажает круговую графику.

Спасибо.

Анимация не запускается в редакторе переполнения стека, поэтому просмотрите в Codepen: Ссылка на анимацию в Codepen. 

* {
  box-sizing: border-box;
}
body {
  background-image: radial-gradient(#fff 25%, #bbb 75%);
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.box {
  height: 50vh;
  width: 50vh;
}
[class^='c'] {
  background-color: #0ff;
  border-radius: 50%;
  height: 50vh;
  width: 50vh;
  mix-blend-mode: multiply;
  position: absolute;
}
.circle1 { /*blue*/
  background-color: rgba(0,255,255,0.5);
  animation: c1 2.5s ease 4 forwards;
}

/*.ion-code{
  animation: code-symbol 2.5s ease 4 forwards; 
  transform: translate(15%, -12%);
}*/

.circle2 { /*yellow*/
  background-color: rgba(255,255,0,0.5);
  animation: c2 2.5s ease 4 forwards ;
}
.circle3 {/*pink*/
  background-color: rgba(255,0,255,0.5);
  animation: c3 2.5s ease 4 forwards ;
}
/*---------------------------------------C1-BLUE-*/

@keyframes c1 {
  0% {transform: translate(0, 0); }
  100% {transform: translate(-25%, 25%); }
}

 /*@keyframes code-symbol {
   0% {transform: translate(0, 0); }
  100% {transform: translate(-25%, 25%); }
}*/

/*---------------------------------------C2-YELLOW-*/

@keyframes c2 {
  from {
            transform: translate(0, 0);
            
  }
  to {

            
            transform: translate(0, -25%);
  }
}

/*---------------------------------------C3-PINK-*/

@keyframes c3 {
  from {
            transform: translate(0, 0);
           
    }
    to {

             transform: translate(25%, 25%);
  }
}

/*--------Symbol layer -----------*/

[class^='ion-'] {
  border-radius: 50%;
  height: 150vh;
  width: 150vh;
  mix-blend-mode: multiply;
  position: absolute;
}

.ion-code { /*blue*/
  /*background-color: rgba(0,255,255,0.5);*/
  animation: ion-code 2.5s ease 4 forwards;
  font-size: 4rem;

}

.ion-arrow-graph-up-right { /*yellow*/
 /* background-color: rgba(255,255,0,0.5); */
  animation: ion-arrow-graph-up-right 2.5s ease 4 forwards;
  font-size: 4rem;
}
.ion-ios-settings-strong {/*pink*/
/*  background-color: rgba(255,0,255,0.5); */
  animation: ion-ios-settings-strong 2.5s ease 4 forwards;
  font-size: 4rem;
}
/*---------------------------------------C1-BLUE-*/

@keyframes ion-code {
  from {transform: translate(0, 0); }
  to {transform: translate(-25%, 25%); }
}

/*---------------------------------------C2-YELLOW-*/

@keyframes ion-arrow-graph-up-right {
  from {transform: translate(0, 0);}
  to {transform: translate(0, -25%);}
}

/*---------------------------------------C3-PINK-*/

@keyframes ion-ios-settings-strong {
  from {transform: translate(0, 0);}
    to {transform: translate(25%, 25%);}
}
<body>  
<div class="box">
  <div class="circle1 ion-code" ></div>
  <div class="circle2 ion-arrow-graph-up-right"></div>
  <div class="circle3 ion-ios-settings-strong"></div>
</div>
</body>

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Лично мне нравится использовать flexbox для такого типа центрирования: 

[class*='ion-']:before {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

https://codepen.io/anon/pen/xydGzK

0 голосов
/ 10 октября 2018

Вам просто нужно нацелиться на псевдоэлемент :before, где находятся иконки в этом примере

СМОТРЕТЬ КОДЕПЕН 

.circle1:before, .circle2:before, .circle3:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

Приветствия.

...