CODEWITHSUNDEEP
cssanimationcss-animations
thomasbishop
thomasbishop

Reputation: 93

Difficulty overlaying pure CSS animations

I have borrowed a Venn animation from elsewhere and would like to place icons (ionicons via CSS class) within the Venn so that they animate in accordance with it.

I've tried numerous approaches, but the closest I've come so far to succeeding is to basically run two sets of animations, using the same parameters, one after the other in the code.

Whilst the animation is now the same for the symbols as well as the CSS circles, they do not occupy the same space and so do not overlay as I want. How can I achieve this, within the existing code set up? I've tried padding, margin etc but that skews the circular graphic.

Thank you.

The animation won't run in the Stack Overflow editor so please view on Codepen: Link to animation on 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>

Upvotes: 3

Views: 81

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78530

Personally, I like to use flexbox for this kind of centering:

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

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

Upvotes: 1

Chris W.
Chris W.

Reputation: 23280

You just need to target the :before pseudo element where the icons live in this example

SEE CODEPEN

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

Cheers.

Upvotes: 2

Related Questions