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>
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.
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
Related
Good day, there was the task to make the animation of an airplane flying around a path. I decided to take advantage of the opportunities in CSS3. But all I have achieved is one animation cycle. The plane flies one circle around the path and the animation stops. I tried using animation-iteration-count with infinite, but all I got was the flight of a plane in chaotic directions. Below is my code, please tell me how to loop this animation so that the plane constantly flies in a circle without stopping.
Code
.wrap {
margin: 100px;
}
.route {
height: 200px;
width: 400px;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
bottom: -13px;
left: 100%;
animation-iteration-count: 3;
animation: flyLeft 1.5s linear forwards, rotatePlane 0.5s linear 1.5s forwards, flyUp 1s linear forwards 2s, RotateRight 0.5s linear 2.8s forwards, MoveRight 3s linear forwards 3s, RotateDown 1s linear 6s forwards, flyDown 1s linear forwards 7s, RotateLeft 1s linear 7.8s forwards;
}
#keyframes flyLeft {
100% {
left: -14px;
}
}
#keyframes rotatePlane {
100% {
transform: rotateZ(90deg);
}
}
#keyframes flyUp {
100% {
bottom: 100%;
}
}
#keyframes RotateRight {
0% {
transform: rotateZ(90deg);
}
100% {
transform: rotateZ(180deg);
}
}
#keyframes MoveRight {
0% {
left: -14px;
}
100% {
left: 380px;
}
}
#keyframes RotateDown {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(270deg);
}
}
#keyframes flyDown {
0% {
bottom: 100%;
}
100% {
bottom: -8%;
}
}
#keyframes RotateLeft {
0% {
transform: rotateZ(270deg);
}
100% {
transform: rotateZ(360deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
You need to wrap all the animations in one #keyframes CSS at-rules to easily make repetitions. Here's a working solution below that wraps all the animations in one #keyframes.
.wrap {
margin: 100px;
}
.route {
height: 200px;
width: 400px;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
animation: travelRoundTheBorder 10s linear infinite;
}
#keyframes travelRoundTheBorder {
30% {
bottom: 0;
right: 100%;
transform: translate(50%, 50%);
}
32.5% {
bottom: 0;
right: 100%;
transform: translate(50%, 50%) rotate(90deg);
}
47.5% {
right: 100%;
bottom: 100%;
transform: translate(50%, 50%) rotate(90deg);
}
50% {
right: 100%;
bottom: 100%;
transform: translate(50%, 50%) rotate(180deg);
}
80% {
right: 0;
bottom: 100%;
transform: translate(50%, 50%) rotate(180deg);
}
82.5% {
right: 0;
bottom: 100%;
transform: translate(50%, 50%) rotate(270deg);
}
97.5% {
right: 0;
bottom: 0;
transform: translate(50%, 50%) rotate(270deg);
}
100% {
right: 0;
bottom: 0;
transform: translate(50%, 50%) rotate(360deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
Splitting the movement along the path and the turns into TWO separate keyframes makes this easier.
The math of the percentages is based on a square but with a rectangle the percentages change.
CSS variable could help here to work out those percentages but I haven't gone deeper into that for the demo purposes.
.wrap {
margin: 10px;
}
.route {
height: 150px;
width: 150px;
margin: auto;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
transform: translate(-50%, -50%) rotate(180deg);
top: 0;
left: 0;
animation: path 6s linear infinite, turn 6s ease infinite;
}
#keyframes path {
0%,
100% {
left: 0;
top: 0;
}
25% {
left: 100%;
top: 0;
}
50% {
left: 100%;
top: 100%;
}
75% {
left: 0;
top: 100%;
}
}
#keyframes turn {
0%,
24% {
transform: translate(-50%, -50%) rotate(180deg);
}
25%,
49% {
transform: translate(-50%, -50%) rotate(270deg);
}
50%,
74% {
transform: translate(-50%, -50%) rotate(0deg);
}
75%,
99% {
transform: translate(-50%, -50%) rotate(90deg);
}
100% {
transform: translate(-50%, -50%) rotate(90deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
Just to begin testing new CSS posibilities, offset-path (not supported in IE, experimental in FF)
reference
#container {
width: 400px;
height: 300px;
border: dotted 5px black;
margin: 30px;
}
#motion-demo {
offset-path: path('M0 -10 H400 A 10 10 1 0 1 410 0 V300 A 10 10 1 0 1 400 310 H0 A 10 10 1 0 1 -10 300 V0');
animation: move 10s infinite linear;
width: 40px;
height: 40px;
background: cyan;
}
#keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
<div id="container">
<div id="motion-demo">A</div>
</div>
I try to animate two blocks with css animation. Its have the same transform animation but one of it has background-color animation also. This animations splitted to two #keyframes.
See code (https://codepen.io/mctep/pen/Rgyaep):
<style>
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
</style>
<div class="a"></div>
<div class="b"></div>
Animation of colored block is lag from gray block In Google Chrome. In Safary and FF it works perfectly.
I can to make one #keyframes for background and other for transform and it solves problem. But I want to use single value of animation property for single element. If there are no any ways to fix it I'll separate moving and coloring animations.
Why this happens? Is it Google Chrome bug?
Couldn't give you a concrete reason why this happens, but we can un-confuse Chrome by simply specifying a background-color in animation B as well.
#keyframes b {
0% {
background-color: gray; /* add this */
transform: translateX(0);
}
}
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
background-color: gray;
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
<div class="a"></div>
<div class="b"></div>
I have the following HTML and CSS code to draw the top of a cube. So it moves down and I want it to animate as if it is opening up. I am unable to figure out how to transform the top so that it appears to open up.
I have included the entire code for the cube. With respect to this, I want the top to open up.
.pers500 {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
-webkit-perspective-origin: 150% 150%;
-webkit-transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
-webkit-transform: translateZ(50px) translateX(171px) translateY(222px);
-moz-transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.4em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px);
-webkit-transform: skewY(40deg) translateZ(50px) translateY(65px) translateX(-20px);
-moz-transform: skewY(40deg) translateZ(50px) translateY(62px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.7em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
-webkit-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
-moz-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
/*0% {transform:rotateX(30deg);}
50% {transform:rotateX(30deg);}
100% {transform:rotateX(30deg);} commented code here doesn't work*/
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
To make the cube open up, you first need to set the transform-origin property (as mentioned in the other answer) to top. This setting would make the top side of the .face.top remain fixed when the rotation is being performed. Then you need to add the rotation using rotateX(). This would rotate the top face to produce the opening effect. Note that the transform property should contain the entire list of transforms for it to open correctly. You cannot just add the rotateX() alone within the animation.
.pers500 {
perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
border: 1px solid brown; /* just for testing */
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.43em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px) translateY(64px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.69em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
transform-origin: top;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
0% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
}
100% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(200deg);
}
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
Note:
Setting a transform-origin will affect the position of the top face in the demo and so the values that you've used for translateX() and translateY() on the top face need to be modified a bit like in the above demo.
The vendor prefixed versions of properties should always be added before the standard property in order to be future proof.
I have removed the vendor prefixed versions in the above snippet just to keep it simple.
Set the transform origin to tbe edge of the cube with
transform-origin: 0 50% 0;
Then rotate it around the z axis:
transform: rotateZ(90deg);
I hope this works for you, I didn't have the chance to test it.
I'm trying out a CSS3 animation on a background image. Everything's working well, the problem is that on Chrome the text ends up being blurred when the animation is in progress:
During Animation:
Turning off the animation:
As you can see the text rendering is fine when the animation is turned off, I know there's the usual issue with text rendering but I can't understand why the rendering is poor on Chrome when the animation is in progress. I'm not sure there's anything I can do about it really. I've tested the animation on Firefox and IE and it's ok. By the way I'm working on Windows.
Firefox:
IE:
EDIT
.bg-div {
position: fixed;
width: 110%;
height: 110%;
transform: translate(-5%, -5%);
-moz-transform: translate(-5%, -5%) rotate(0.02deg); /* rotation to solve choppy animation on Firefox */
-ms-transform: translate(-5%, -5%);
background-image: url('images/colour-test.jpg');
background-size: cover;
-webkit-animation: bg-animation 10s linear infinite;
-moz-animation: bg-animation 10s linear infinite;
-ms-animation: bg-animation 10s linear infinite;
}
#-webkit-keyframes bg-animation {
25% { transform: translate(-5.5%, -5.5%); }
50% { transform: translate(-5.3%, -4.9%); }
75% { transform: translate(-4.8%, -4.3%); }
}
#-moz-keyframes bg-animation {
25% { -moz-transform: translate(-5.5%, -5.5%) rotate(0.02deg); }
50% { -moz-transform: translate(-5.3%, -4.9%) rotate(0.02deg); }
75% { -moz-transform: translate(-4.8%, -4.3%) rotate(0.02deg); }
}
#-ms-keyframes bg-animation {
25% { -ms-transform: translate(-5.5%, -5.5%); }
50% { -ms-transform: translate(-5.3%, -4.9%); }
75% { -ms-transform: translate(-4.8%, -4.3%); }
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 65%;
text-align: center;
}
After reading the question and answer posted in the comments I've tried to adding -webkit-font-smoothing: subpixel-antialiased; to .bg-div but that didn't make any difference.
EDIT 2
Okay so this is a bit of a weird one, during the animation apparently the position: fixed is making the text blurry. I don't know how that is possible, anyway once I removed the position: fixed and the background was animating the text was displayed correctly. It's still not what I want because I need the background to be fixed.
In my testing, the problem is fixed if the transform is not used on .content. Luckily, you don't need to use transform to position your content div.
Use this margin: auto trick to position instead
Using this method, you do not need to use transform: translate(-50%, -50%)
The content is centered with the combination of top, right, bottom, left, margin: auto and the percentage width and height.
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 65%;
text-align: center;
}
Working Example
body { margin: 0 auto; width: 500px }
.bg-div {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 800px;
height: 800px;
transform: translate(-5%, -5%);
background: url('http://www.placehold.it/800') no-repeat;
-webkit-animation: bg-animation 2s linear infinite;
animation: bg-animation 2s linear infinite;
}
#-webkit-keyframes bg-animation {
0% {
transform: translate(-5.5%, -5.5%);
}
50% {
transform: translate(-5%, -5%);
}
100% {
transform: translate(-5.5%, -5.5%);
}
}
#keyframes bg-animation {
0% {
transform: translate(-5.5%, -5.5%);
}
50% {
transform: translate(-5%, -5%);
}
100% {
transform: translate(-5.5%, -5.5%);
}
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 65%;
text-align: center;
}
<div class="bg-div"></div>
<div class="content">
<h1>This looks better</h1>
<input value="Text" />
</div>
This question already has answers here:
CSS3 Translate across an Arc
(3 answers)
Closed 7 years ago.
Is it possible with current CSS3 to animate an object (DIV) along an this arc?
I've forked the (very good) #ArunBertil "fulcrum" solution to convert it to CSS3 Animation:
Running Demo
CSS
#keyframes drawArc1 {
0% { transform: rotate(180deg); }
100% { transform: rotate(0deg); }
}
#keyframes drawArc2 {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}
body{
padding: 150px;
background: black;
}
.wrapper {
width: 300px;
animation: drawArc1 3s linear infinite;
}
.inner {
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc2 3s linear infinite;
}
HTML
<div class="wrapper">
<div class="inner"></div>
</div>
Watch it on FireFox... to run it on other browsers, simply put the prefixes (#-webkit-keyframes, etc)
Check this
http://dabblet.com/gist/1615901
.wrapper {
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-origin: 50% 50%;
}
.inner {
display: inline-block;
padding: 1em;
transition: transform 1s;
background: lime;
}
html:hover .wrapper {
transform: rotate(180deg);
}
html:hover .inner {
transform: rotate(-180deg);
}
Well, working on the work of Andrea based on the work of Arun ...
simplified to make use of only 1 div, and 1 animation:
#keyframes drawArc {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
#-webkit-keyframes drawArc {
0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
body{
padding: 150px;
background: black;
}
.test {
width: 30px;
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
}
demo
Added also text in the div to show that it doesn't rotate