I would like to run my animation consisting of two keyframes to mimic the motion of a closing garage door, but the animation stops after one execution. Adding animation-iteration-count: 10; just flashes the 'door', doesn't rerun the whole animation. What could be the issue? Thank you in advance!
.house {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 150px;
}
.house .front {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 5.2em;
height: 4em;
border-left: 0.5em solid grey;
border-right: 0.5em solid grey;
}
.house .front .gable {
position: absolute;
top: -3.5em;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-left: 3.1em solid transparent;
border-right: 3.1em solid transparent;
border-bottom: 3.5em solid grey;
}
.house .front .door {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 4.2em;
height: 0.4em;
background: grey;
border-radius: 2px 2px 0 0;
overflow: hidden;
}
.house .front .door:before {
content: '';
display: block;
width: 40%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
}
.house .front #d1 {
transform: translateX(-50%) translateY(-80%);
}
.house .front #d2 {
transform: translateX(-50%) translateY(-300%);
}
.house .front #d3 {
transform: translateX(-50%) translateY(-540%);
}
.house .front #d4 {
transform: translateX(-50%) translateY(-800%);
}
.house .front .doors .door {
animation-name: hide, up;
animation-duration: 1.6s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
opacity: 1;
}
.house .front .doors #d4 {
animation-delay: 0s, 0s;
}
.house .front .doors #d3 {
animation-delay: 0s, 0.3s;
}
.house .front .doors #d2 {
animation-delay: 0s, 0.6s;
}
.house .front .doors #d1 {
animation-delay: 0s, 0.9s;
}
#keyframes hide
{
from { opacity: 0; } to { opacity: 0 }
}
#keyframes up
{
0% { opacity: 0; }
1% { opacity: 1; }
100% { opacity: 1; }
}
<div class="house">
<div class="front">
<div class="gable"></div>
<div class="doors">
<div id="d1" class="door"></div>
<div id="d2" class="door"></div>
<div id="d3" class="door"></div>
<div id="d4"class="door"></div>
</div>
</div>
</div>
sorry about this part, but SO wouldn't let me post this question unless more text is added.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I've made a mustache, I'll send a picture below, and I'm trying to animate it to give it a bit more life. But, for some reason this animate from css doesn't work... I'm not sure what I'm doing wrong.
This may be an outdated form of CSS? Or, maybe there's something I misspelled that I missed to check?
.mustache {
width: 180px;
height: 180px;
left: 100px;
border-radius: 50%;
position: absolute;
color: pink;
box-shadow: 150px 240px 0 0 currentColor, 300px 240px 0 0 currentColor
}
.mustache::before {
animation: shakeLeft 1s ease-in-out infinte;
content: "";
position: absolute;
left: 30px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 0 100%;
transform: rotate(-40deg);
transform-origin: right 210px;
}
.mustache::after {
content: "";
position: absolute;
left: 390px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 100% 0;
transform: rotate(40deg);
transform-origin: left 210px;
}
#keyframes shakeLeft {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}
#keyframes shakeRight {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}
.mustache:before {
animation: shakeLeft 1s ease-in-out infinte;
}
.mustache:after {
animation: shakeRight 1s ease-in-out infinte;
}
<div class="mustache">
</div>
Any help/comment is appreciated. Thank you!
You had a slight typo... You misspelled infinite. If you fix that, the code runs.
I also changed the shakeRight keyframe to have positive values to make it symmetrical.
.mustache {
width: 180px;
height: 180px;
left: 100px;
border-radius: 50%;
position: absolute;
color: pink;
box-shadow: 150px 240px 0 0 currentColor, 300px 240px 0 0 currentColor
}
.mustache::before {
animation: shakeLeft 1s ease-in-out infinite;
content: "";
position: absolute;
left: 30px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 0 100%;
transform: rotate(-40deg);
transform-origin: right 210px;
}
.mustache::after {
animation: shakeRight 1s ease-in-out infinite;
content: "";
position: absolute;
left: 390px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 100% 0;
transform: rotate(40deg);
transform-origin: left 210px;
}
#keyframes shakeLeft {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}
#keyframes shakeRight {
0% {
transform: rotate(50deg);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(50deg);
}
}
<div class="mustache" />
You have to do some changes in your css >>>
Try with this Your animation is perfectly working now
Here's your HTML:
<div class="mustache"></div>
Here's your Edited CSS:
<style type="text/css">
#keyframes shakeLeft {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}
#keyframes shakeRight {
0% {
transform: rotate(50deg);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(50deg);
}
}
.mustache {
width:180px;
height:180px;
left: 100px;
border-radius: 50%;
position: absolute;
color: pink;
box-shadow:
150px 240px 0 0 currentColor,
300px 240px 0 0 currentColor
}
.mustache::before {
animation-name: shakeLeft;
animation-duration: 4.5s;
animation-delay: 1.5s;
animation-iteration-count: infinite;
content: "";
position: absolute;
left: 30px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 0 100%;
transform: rotate(-40deg);
transform-origin: right 210px;
}
.mustache::after {
animation-name: shakeRight;
animation-duration: 4.5s;
animation-delay: 1.5s;
animation-iteration-count: infinite;
content: "";
position: absolute;
left: 390px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 100% 0;
transform: rotate(40deg);
transform-origin: left 210px;
}
</style>
I'm playing round with CSS animation by trying to replicate the following new google ads logo - example.
What is the best way to add the bounce effect on the green ball?
My current animation:
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
My code (fiddle):
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock 1.5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
I've tried with this animation
animation: greenblock .6s ease-in-out .5s forwards;
and this set of keyframes
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
Demo
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock .6s ease-in-out .5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
How can I achieve the desired effect? I want to create a kind of box that flips around in 3d in the x axis and reveals the other face, all while conserving the same dimensions. Currently the effect is almost working but for some reason one face is always visible. Why does that happen and how to change that?
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
Just add this css properties,
#div2 { z-index: 1;}
#div1:hover #div2 { z-index: 0;}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
z-index: 1;
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
z-index: 0;
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
Add backface-visibility:hidden;
div {
backface-visibility: hidden;
}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
I would like to use the progress-bar here at https://bootsnipp.com/snippets/featured/circle-progress-bar, but I don't know how to set less than 50% when you have 2, 3 or more types (each got different percentage) of these on your website, because this code sets right-side of bar for every type u got there and I don't know what to do when I want less than 50% only at 3.
Type of bar:
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
+
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
Could someone help me please ?
Using SVG
svg {
transform: rotate(-90deg);
stroke-dasharray: 251; /* (2PI * 40px) */
stroke-dashoffset: 251;
animation: offsettozero 5s linear forwards;
}
#keyframes offsettozero {
to {
stroke-dashoffset: 0;
}
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="#428bca" stroke-width="6" fill="#333" />
</svg>
<!-- VV Click "Run code snippet" for demo -->
Since the right-side animation is shared among all the progress circles, if you want to make one that is less than 50%, you'll have to override that generic style. Then you won't need a left-side animation.
So your CSS would be something like:
.progress.yourDiv .progress-right .progress-bar {
animation: yourAnimation 1.8s linear forwards;
}
.progress.yourDiv .progress-left .progress-bar{
animation: none;
}
Where yourAnimation is the same as the shared right-side rule for .progress .progress-right .progress-bar in the Bootstrap example, except the name is changed.
For an animation to 37.5%, yourAnimation would look like this:
#keyframes yourAnimation{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
Here's an example, where .yourDiv is .yellow and yourAnimation is loading-3.
.progress {
width: 150px;
height: 150px !important;
float: left;
line-height: 150px;
background: none;
margin: 20px;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: #44484b;
font-size: 24px;
color: #fff;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #049dff;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-right .progress-bar {
animation: loading-3 1.8s linear forwards;
}
.progress.yellow .progress-left .progress-bar {
animation: none;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">37.5%</div>
</div>
</div>
Update - The pen below has been updated to show the end results.
I am trying to mimic signal animation using css animation but I cant seem to grasp the idea of animation delay. If you look here
http://codepen.io/anon/pen/YwZOmK?editors=110
.real-time-animation {
margin-top: 20px;
position: relative;
transform: scale(0.5) rotate(45deg);
transform-origin: 5% 0%;
}
.real-time-animation>div {
animation: sk-bouncedelay 3s infinite forwards;
}
.circle1 {
animation-delay: 2s;
}
.circle2 {
animation-delay: 1s;
}
#keyframes sk-bouncedelay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.circle {
position: relative;
width: 16em;
height: 16em;
border-radius: 50%;
background: transparent;
border: 20px solid transparent;
border-top-color: darkblue;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.circle2 {
top: 40px;
width: 12em;
height: 12em;
left: 33px;
}
.circle3 {
top: 80px;
width: 8em;
height: 8em;
left: 66px;
}
<div class="real-time-animation">
<div class="circle circle1"> </div>
<div class="circle circle2"> </div>
<div class="circle circle3"> </div>
</div>
You should be able to understand what I am trying to accomplish. I want to start from showing nothing, then after 1 sec show the first bar, then after 1 sec, show the 2nd bar and finally after another 1 sec show the 3rd bar.
My solution:
http://codepen.io/anon/pen/JGWmJg?editors=110
.real-time-animation{
margin-top: 20px;
position: relative;
transform: scale(0.5) rotate(45deg);
transform-origin: 5% 0%;
}
.circle1, .circle2, .circle3{
animation: 4s infinite ease-in;
animation-delay: 1s;
}
.circle1{
animation-name: circle1;
}
.circle2{
animation-name: circle2;
}
.circle3{
animation-name: circle3;
}
#keyframes circle1 {
0%{
opacity: 0;
}
25%{
opacity: 0;
}
50%{
opacity: 0;
}
75%{
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes circle2 {
0%{
opacity: 0;
}
25%{
opacity: 0;
}
50%{
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes circle3 {
0%{
opacity: 0;
}
25%{
opacity: 1;
}
50%{
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
.circle {
position: relative;
width: 16em; height: 16em;
border-radius: 50%;
background: transparent;
border: 20px solid transparent;
border-top-color: darkblue;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.circle2{
top: 40px;
width: 12em;
height: 12em;
left: 33px;
}
.circle3{
top: 80px;
width: 8em;
height: 8em;
left: 66px;
}
You can change the speed of the animation duration: "animation: 4s infinite ease-in;"
As I understand your question animated opacity needs to be like this:
Progress \ Element
.circle1
.circle2
.circle3
0%
0
0
0
25%
0
0
1
50%
0
1
1
75%
1
1
1
100%
0
0
0
The opacity property is clamped which means if you set negative values, it will have the same effect as setting it to 0. The same goes for values larger than 1.
Using this property, we can subtract a constant value from predefined CSS variables and use that as opacity.
.real-time-animation {
zoom: 10;
width: 8px;
height: 8px;
position: relative;
display: inline-block;
}
.real-time-animation>.circle {
animation: circle 4s infinite ease-in;
}
.circle1 {
--circle: 1;
}
.circle2 {
--circle: 2;
}
.circle3 {
--circle: 3;
}
#keyframes circle {
0%, 100% {
opacity: 0;
}
25% {
opacity: calc(var(--circle) - 2);
}
50% {
opacity: calc(var(--circle) - 1);
}
75% {
opacity: 1;
}
}
.circle {
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
border-top-color: darkblue;
position: absolute;
margin: 0;
box-sizing: border-box;
top: 100%;
left: 0%;
width: calc(16px - (var(--circle) - 1)*4px);
height: calc(16px - (var(--circle) - 1)*4px);;
transform: rotate(45deg) translate(-50%, -50%);
transform-origin: 0 0;
}
<div class="real-time-animation">
<div class="circle circle1"> </div>
<div class="circle circle2"> </div>
<div class="circle circle3"> </div>
</div>