I'm building an animation for cards. I wonder how to have the same effect for the card animation however without animating the z-index. The animation should use only transform and opacity properties.
I want to achieve the same effect(as demonstrated below) without using z-index in the animation, because it will cause painting to occur.
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
}
.item {
padding: 8px;
background-color: blue;
color: white;
opacity: 0;
height: 30px;
width: 32px;
text-align: center;
position: absolute;
top: auto;
bottom: 0;
animation: AnimateCard 16s infinite
cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
animation-delay: -9s;
}
.item:nth-child(2) {
animation-delay: -5s;
}
.item:nth-child(3) {
animation-delay: -1s;
}
.item:nth-child(4) {
animation-delay: 3s;
}
#keyframes AnimateCard {
0% {
transform: translateY(-72px);
z-index: 1;
opacity: 0;
}
26% {
transform: translateY(-72px);
z-index: 1;
opacity: 0.2;
}
34% {
transform: translateY(-36px);
z-index: 1;
opacity: 0.3;
}
51% {
transform: translateY(-36px);
z-index: 1;
opacity: 0.3;
}
58% {
transform: translateY(0);
opacity: 1;
}
74% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 0;
}
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
In order to achieve a more marked fading effect between 4 and 1, I've applied two changes:
removed z-index from keyframes
changed 100% keyframe with 83%, so that it will fade away before 100%.
Here's the full snippet:
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
}
.item {
padding: 8px;
background-color: blue;
color: white;
opacity: 0;
height: 30px;
width: 32px;
text-align: center;
position: absolute;
top: auto;
bottom: 0;
animation: AnimateCard 16s infinite
cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
animation-delay: -9s;
}
.item:nth-child(2) {
animation-delay: -5s;
}
.item:nth-child(3) {
animation-delay: -1s;
}
.item:nth-child(4) {
animation-delay: 3s;
}
#keyframes AnimateCard {
0% {
transform: translateY(-72px);
opacity: 0;
}
26% {
transform: translateY(-72px);
opacity: 0.2;
}
34% {
transform: translateY(-36px);
opacity: 0.3;
}
51% {
transform: translateY(-36px);
opacity: 0.3;
}
58% {
transform: translateY(0);
opacity: 1;
}
74% {
transform: translateY(0);
opacity: 1;
}
83% {
transform: translateY(0);
opacity: 0;
}
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
We can clip the bottom most rectangle to height 0 as top one collapse on it:
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
}
.item {
padding: 8px;
background-color: blue;
color: white;
opacity: 0;
height: 30px;
width: 32px;
text-align: center;
position: absolute;
top: auto;
bottom: 0;
animation: AnimateCard 16s infinite cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
animation-delay: -9s;
}
.item:nth-child(2) {
animation-delay: -5s;
}
.item:nth-child(3) {
animation-delay: -1s;
}
.item:nth-child(4) {
animation-delay: 3s;
}
#keyframes AnimateCard {
0% {
transform: translateY(-72px);
opacity: 0;
}
26% {
transform: translateY(-72px);
opacity: 0.2;
}
34% {
transform: translateY(-36px);
opacity: 0.3;
}
51% {
transform: translateY(-36px);
opacity: 0.3;
}
58% {
transform: translateY(0);
opacity: 1;
}
74% {
transform: translateY(0);
opacity: 1;
}
76% {
clip: rect(0px, 32px, 32px, 0px);
}
85% {
clip: rect(32px, 32px, 32px, 0px);
}
100% {
transform: translateY(0);
opacity: 0;
}
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
I removed z-index from keyframes and just do small changes into your existing CSS style code so check below snippet.
*,::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.container {
position: relative;
box-shadow: 0 0 0 1px red;
height: 200px;
width: 64px;
overflow: hidden;
}
.item {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
background-color: blue;
color: white;
height: 60px;
width: 64px;
text-align: center;
position: absolute;
top: auto;
bottom: 0;
animation: AnimateCard 16s infinite cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
animation-delay: -9s;
}
.item:nth-child(2) {
animation-delay: -5s;
}
.item:nth-child(3) {
animation-delay: -1s;
}
.item:nth-child(4) {
animation-delay: 3s;
}
#keyframes AnimateCard {
0% {
transform: translateY(-210px);
opacity: 0;
}
26% {
transform: translateY(-140px);
opacity: 0.5;
}
34% {
transform: translateY(-70px);
opacity: 0.2;
}
51% {
transform: translateY(-70px);
opacity: 0.2;
}
58% {
transform: translateY(0);
opacity: 1;
}
74% {
transform: translateY(0);
opacity: 1;
}
91% {
transform: translateY(140px);
opacity: 1;
}
100% {
transform: translateY(210px);
opacity: 0;
}
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
Related
I am studying CSS animation. I want my animation moving one by one, as I don't know JS I want to do it by CSS only. How can I do this? I faced the problem of rules from and to in animations, when I change them the animations don't work as expected.
I have the following HTML
body {
margin: 0;
background: grey;
}
main {
font-family: Open Sans;
text-transform: uppercase;
line-height: 1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.animation {
width: 20em;
height: 4em;
margin: 1em auto;
position: relative;
}
.squares {
margin: auto;
background: red;
/* display: flex;
flex-wrap: wrap;
justify-content: center;*/
}
.small_square {
width: 10px;
height: 10px;
background-color: white;
text-align: center;
display: block;
text-align: center;
position: relative;
margin: 0;
padding: 0;
left: 48%;
animation: appearance_small 1s ease-in-out;
animation: move_around 3s ease-in-out;
*/
}
.big_square {
margin: auto;
width: 40px;
height: 40px;
background-color: black;
display: block;
position: relative;
top: 30px;
animation: appearance_big 1.3s ease-in-out;
animation-delay: 2s;
animation: spin 3s ease-in-out;
forwards;
}
#keyframes appearance_big {
0% {
transform: scale(0%);
}
100% {
opacity: 1;
}
}
#keyframes appearance_small {
0% {
opacity: 0;
transform: scale(0%);
top: 50px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes move_around {
from {
transform: translate(50%, 50px) rotate(0turn) translate(-50%, -50px);
}
to {
transform: translate(50%, 50px) rotate(0.50turn) translate(-0%, -50px);
}
<main>
<div id="animation" class="animation">
<div class="squares">
<div class="small_square"></div>
<div class="big_square"></div>
</div>
</main>
I need to create this animation
1: https://i.stack.imgur.com/FVvJQ.gif
Original animation is above link, the code must be like that.
Could you please help me with that.
I cannot make correct animation , here is my full code.
Here is my current code.
(.........................................................................................................................................................................................................................................................................................................................)
body {
background-color: #01143B;
}
#keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.8;
}
25% {
opacity: .4;
}
50% {
transform: scale(1.4);
opacity: 0.8;
}
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 200px;
}
div:nth-child(1) {
animation: pulse 3s infinite;
}
div:nth-child(2) {
animation: pulse 4s infinite .5s;
}
div:nth-child(3) {
animation: pulse 5s infinite .7s;
}
img {
position: absolute;
margin-left: 70px;
margin-top: 65px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
.circle {
background-color: white;
}
<div></div>
<div></div>
<div></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have added a class to each individual DIV to work when built into a design.
It is necessary to have a separate animation timing for each circle
I hope I've been helpful
body {
background-color: #01143B;
}
img {
position: absolute;
margin-left: 43px;
margin-top: 43px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.1;
}
#keyframes pulse_1 {
10% { transform: scale(1); }
20% { transform: scale(0.95); }
30% { transform: scale(1); }
}
.circle {
background-color: white;
animation: pulse_1 3s infinite 1s;
width: 150px;
height: 150px;
opacity: 1;
}
#keyframes pulse_ca {
15% { transform: scale(1); }
25% { transform: scale(0.95); }
35% { transform: scale(1); }
}
div.ca {
width: 180px;
height: 180px;
animation: pulse_ca 3s infinite 1s;
}
#keyframes pulse_cb {
20% { transform: scale(1); }
30% { transform: scale(0.95); }
40% { transform: scale(1); }
}
div.cb {
width: 210px;
height: 210px;
animation: pulse_cb 3s infinite 1s;
}
#keyframes pulse_cc {
25% { transform: scale(1); }
35% { transform: scale(0.95); }
45% { transform: scale(1); }
}
div.cc {
width: 240px;
height: 240px;
animation: pulse_cc 3s infinite 1s;
}
<div class="cc"></div>
<div class="cb"></div>
<div class="ca"></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have a simple 3 text I want to add slide down effect of these text here is what I have so far jsfiddle demo
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3 {
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
#keyframes anim-1 {
0%,
8.3% {
left: -100%;
opacity: 0;
}
8.3%,
25% {
left: 25%;
opacity: 1;
}
33.33%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-2 {
0%,
33.33% {
left: -100%;
opacity: 0;
}
41.63%,
58.29% {
left: 25%;
opacity: 1;
}
66.66%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-3 {
0%,
66.66% {
left: -100%;
opacity: 0;
}
74.96%,
91.62% {
left: 25%;
opacity: 1;
}
100% {
left: 110%;
opacity: 0;
}
}
<p class="item-1">Fast.</p>
<p class="item-2">Slow</p>
<p class="item-3">Much slow</p>
I have a simple 3 text I want to add slide down effect of these text here is what I have so far jsfiddle
The result I want can be seen in this page if you look at the title named video made sample
For now it just slides right, I want a slide down effect
Just replace left with top?
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3 {
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
#keyframes anim-1 {
0%,
8.3% {
top: -100%;
opacity: 0;
}
8.3%,
25% {
top: 25%;
opacity: 1;
}
33.33%,
100% {
top: 110%;
opacity: 0;
}
}
#keyframes anim-2 {
0%,
33.33% {
top: -100%;
opacity: 0;
}
41.63%,
58.29% {
top: 25%;
opacity: 1;
}
66.66%,
100% {
top: 110%;
opacity: 0;
}
}
#keyframes anim-3 {
0%,
66.66% {
top: -100%;
opacity: 0;
}
74.96%,
91.62% {
top: 25%;
opacity: 1;
}
100% {
top: 110%;
opacity: 0;
}
}
<p class="item-1">Fast.</p>
<p class="item-2">Slow</p>
<p class="item-3">Much slow</p>
I am trying to build a donut chart with css. I am observing that it is unable to rotate more than 180 degrees. Am I missing anything.
This stops me to show donut chart for any data which is more than 50%.
http://jsfiddle.net/BkJY7/80/
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
You are missing the keyframes for rotate-lt.
Also, some minor adjustments on the angles:
body {
margin: 50px;
}
.spinner {
width: 250px;
height: 250px;
background: #aaa;
margin: 0 auto;
position: relative;
}
.spinner:after {
position: absolute;
content: "";
width: 0%;
height: 0%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 6s;
}
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(180deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 250px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
I would try to use this from css-tricks to achieve what you want:
https://codepen.io/HugoGiraudel/pen/BHEwo
Tutorial:
https://css-tricks.com/css-pie-timer/
html:
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
css:
.wrapper {
position: relative;
margin: 40px auto;
background: white;
}
.wrapper, .wrapper * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
}
.wrapper .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: #08C;
border: 5px solid rgba(0,0,0,0.5);
}
.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none;
animation: rota 5s linear infinite;
}
.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
animation-play-state: running;
}
.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: opa 5s steps(1, end) infinite reverse;
border-left: none;
}
.wrapper .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: opa 5s steps(1, end) infinite;
}
#keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes opa {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
Also you can check this out also nice tutorial:
http://javabeat.net/pie-chart-css3-html/
Keep in mind I take no credit for writing this code, just helpin.
you add keyframe only for rotate-rt that why its rotate half
add a keyframe for rotate-lt so get the better result
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
I have some moving word css3 animation.
The animation is fine (snippet). If someone use hover the animation stops (fine), but don't accept a change of the opacity and z-index (.bubble:hover).
opacity: 1;
z-index: 100;
The .bubble:hover class is in use the transform action works.
transform: scale(1.2);
The aim is to pop the hovered bubble in the foreground.
If the bubble is left the animation should move on from the point of stop.
How can I fix it?
Thanks for help.
.solSystem {
postion: absolute;
height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
color: #FFF;
}
.mars:hover,
.earth:hover {
animation-play-state: paused;
}
.bubble:hover {
background: #DE383B !Important;
padding: 1vw;
border: 0.1vw solid #000;
color: #FFF !Important;
transform: scale(1.2);
opacity: 1;
z-index: 100;
}
.mars {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveRigthToLeft, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.earth {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveLeftToRigth, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.bubble {
padding: 1vw;
color: #FFF;
border-color: #000;
border-width: 0.1vw;
background-color: #004A99;
font-weight: bold;
font-size: 1.1vw;
font-family: Arial, FreeSans, sans-serif;
position: absolute;
border-style: solid;
border-radius: 100%;
}
#keyframes moveLeftToRigth {
0% {
left: 15vw;
}
50% {
left: 40vw;
}
100% {
left: 15vw;
}
}
#keyframes scale {
0% {
transform: scale(1);
}
32% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
70% {
transform: scale(0.8);
animation-timing-function: ease-in;
}
75% {
transform: scale(0.9);
animation-timing-function: ease-in-out;
}
86% {
transform: scale(1.2);
}
98% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes color {
0% {
opacity: 0.5;
z-index: 1;
}
20% {
opacity: 0.6;
z-index: 2;
}
40% {
opacity: 0.7;
z-index: 3;
}
60% {
opacity: 0.8;
z-index: 4;
}
80% {
opacity: 0.9;
z-index: 5;
}
90% {
opacity: 1;
z-index: 6;
}
95% {
opacity: 0.8;
z-index: 4;
}
100% {
opacity: 0.6;
z-index: 2;
}
}
<div class="solSystem">
<a href="Test1.html">
<div class="earth" style="animation-duration: 20s,20s,20s;">
<div class="bubble" style="left:12vw;">
Test1
</div>
</div>
</a>
<a href="Test2.html">
<div class="mars" style="animation-duration: 30s,30s,30s;">
<div class="bubble" style="left:30vw;">
Test2
</div>
</div>
</a>
</div>
This happend cause you gave to parent div less opacity with "color" keyframes and then apply that animation to parent of a hovered div. You should make color changes on "bubble" div.
codepen:
http://codepen.io/bra1N/pen/dXKLbp
.solSystem {
postion: absolute;
height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
color: #FFF;
}
.mars:hover,
.earth:hover {
animation-play-state: paused;
}/*
.bubble:hover {
background: #DE383B !Important;
padding: 1vw;
border: 0.1vw solid #000;
color: #FFF !Important;
transform: scale(1.2);
opacity: 1 !important;
z-index: 100 !important;
}*/
.mars {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveRigthToLeft, scale;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.earth {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveLeftToRigth, scale;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.bubble {
padding: 1vw;
color: #FFF;
border-color: #000;
border-width: 0.1vw;
background-color: #004A99;
font-weight: bold;
font-size: 1.1vw;
font-family: Arial, FreeSans, sans-serif;
position: absolute;
border-style: solid;
border-radius: 100%;
animation-name: color;
animation-iteration-count: infinite;
animation-duration: 30s;
}
#keyframes moveLeftToRigth {
0% {
left: 15vw;
}
50% {
left: 40vw;
}
100% {
left: 15vw;
}
}
#keyframes scale {
0% {
transform: scale(1);
}
32% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
70% {
transform: scale(0.8);
animation-timing-function: ease-in;
}
75% {
transform: scale(0.9);
animation-timing-function: ease-in-out;
}
86% {
transform: scale(1.2);
}
98% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes color {
0% {
opacity: 0.4;
z-index: 1;
}
20% {
opacity: 0.6;
z-index: 2;
}
40% {
opacity: 0.7;
z-index: 3;
}
60% {
opacity: 0.8;
z-index: 4;
}
80% {
opacity: 0.9;
z-index: 5;
}
90% {
opacity: 1;
z-index: 6;
}
95% {
opacity: 0.8;
z-index: 4;
}
100% {
opacity: 0.6;
z-index: 2;
}
}
<div class="solSystem">
<a href="Test1.html">
<div class="earth" style="animation-duration: 20s,20s,20s;">
<div class="bubble" style="left:12vw;">
Test1
</div>
</div>
</a>
<a href="Test2.html">
<div class="mars" style="animation-duration: 30s,30s,30s;">
<div class="bubble" style="left:30vw;">
Test2
</div>
</div>
</a>
</div>