I want to create a full CSS animated progress bar, using steps() to go through the end.
#keyframes loading {
0% {
width: 0%;
left: 50%;
}
100% {
width: 100%;
left: 0%;
}
}
div {
position: absolute;
top: 50%;
left: 50%;
width: 0%;
height: 1px;
background-color: #000;
-webkit-animation: loading 15s steps(15, end);
animation: loading 15s steps(15, end);
transition: all 0.5s ease-out;
}
My main objective is to keep the steps() and add a transition effect to smooth it.
How could I achieve that without JS ?
I think this is what you are after.
I've simplified this to 5 positions...the math for 15 stages is pretty simple though.
#keyframes loading {
0% {
width: 0%;
}
25% {
width: 25%;
}
50% {
width: 50%;
}
75% {
width: 75%;
}
100% {
width: 100%;
}
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 10px;
background-color: #000;
animation: loading 5s infinite;
}
<div></div>
Related
I would like to have a css animation for an image but when the animation completes the animation restarts but with a different random starting and finishing position.
<div id="aniBox"></div>
<span id="aniBall"></span>
#aniBox {
position: absolute;
right:5px;
bottom: -9%;
width:100%;
height:100%;
}
#aniBall {
content: url(../../../public/imgs/animations/biden133.png);
position: absolute;
width: 40px;
height: auto;
transform: translate(-50%, -50%);
animation: float 20s infinite ease-in-out, spin 5s infinite linear;
}
#keyframes float {
0% {
bottom: -9%;
right: 0;
}
100% {
bottom:108%;
right: 33%;
}
}
Please help, when I'm trying to play animation with moving ball in position X and Y at the same time it doesn't work, some strange behaviour. I would like to look like a batted and falling ball
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s, fly-ball-y 2s;
}
#keyframes fly-ball-x {
100% {
transform: translateX(300px);
}
}
#keyframes fly-ball-y {
100% {
transform: translateY(100px);
}
}
<div class="ball"></div>
**The result I'm expecting is like the code below:**
#keyframes fly-ball-x {
100% {
left: 300px;
}
}
#keyframes fly-ball-y {
100% {
bottom: 0;
}
}
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s cubic-bezier(0.17, 0.67, 0.6, 1), fly-
ball-y 2s;
}
<div class="ball"></div>
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball 2s
}
#keyframes fly-ball {
100% {
transform: translateX(300px) translateY(100px);
}
}
<div class="ball"></div>
It is because you weren't running the animations concurrently. Here both translations are just being run at the same time. You just had a bit more than you needed.
EDIT
Check out this blog post. It gives explanations on the kinds of curves it seems you are going for Curved Path Animations In CSS
The issue is visible when animating the skewY() property. Looks like the element's width shrinks down a little and no longer touches the sides of an equally wide container.
The same does not happen when animating with skewX() - the height is animated as expected.
I'm experiencing the bug in Safari only, both desktop and mobile browsers. Firefox and Chrome work as expected. This issue is visible during transition or animations only.
GIF previews:
Animation in Firefox/Chrome
Animation in Safari
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
Try to use browser prefix.
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
-webkit-animation: skew-x 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
-webkit-animation: skew-y 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#-webkit-keyframes skew-x {
0% { -webkit-transform: skewX(15deg) skewY(0); }
to { -webkit-transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
#-webkit-keyframes skew-y {
0% { -webkit-transform: skewX(0) skewY(15deg); }
to { -webkit-transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
I have a container div with an object inside of it. I can animate one property of it, e.g. bottom, OR left, but can't animate BOTH at the same time.
How does one animate both properties at the same time so it moves diagonally? I don't understand why the following code does not work:
#container {
position: relative;
}
#keyframes move {
0% { left: 0px; bottom: 0px; }
100% { left: 122px; bottom: 157px; }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
/*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
animation: move 2.5s linear 0s infinite;
}
It does move diagonally:
#container {
position: relative;
height: 180px;
}
#keyframes move {
0% { left: 0px; bottom: 0px; }
100% { left: 122px; bottom: 157px; }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
animation: move 2.5s linear 0s infinite;
}
<div id="container"><div id="object">MOVING</div></div>
You can consider translation to have the same movement with better performance:
#container {
position: relative;
height: 180px;
}
#keyframes move {
0% { transform:translate(0,0) }
100% { transform:translate(125px,-125px) }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
animation: move 2.5s linear 0s infinite;
}
<div id="container"><div id="object">MOVING</div></div>
I am trying to build a simple CSS3 animation, a pulsing square inside a bigger square (centered).
It seems to work fine except on IE, at the end of the animation the inner square move to up-left of his parent.
I didn't find a solution, help me please. What am I doing wrong?
#foo{
position: relative;
display: table;
margin: auto;
width: 100px;
height: 100px;
top: 50px;
background: #ccf;
}
#foo::before{
content:"";
position: absolute;
display: inline-block;
width: 50%;
height: 50%;
left: 50%;
top: 50%;
background: #55a;
animation: 1s ease-in-out infinite pulse;
}
#keyframes pulse {
0% { transform: translate(-50%, -50%) scale(.2,.2); }
50% { transform: translate(-50%, -50%) scale(.8,.8); }
100% { transform: translate(-50%, -50%) scale(.2,.2); }
}
Here a JsFiddle of the code
How strange. It looks like IE and Edge are having some issue resetting the transforms on subsequent loops.
Although I couldn't find a direct solution to the browser's rendering problem (likely a bug), your sample looks like a great place to use the absolute centering trick. By not having the extra translate to center it, it works in IE, and is a bit simpler.
Working Example (jsFiddle):
#foo{
position: relative;
display: table;
margin: auto;
width: 100px;
height: 100px;
top: 50px;
background: #ccf;
}
#foo::before{
content:"";
position: absolute;
display: inline-block;
width: 50%;
height: 50%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #55a;
animation: 1s ease-in-out infinite pulse;
}
#keyframes pulse {
0% {transform: scale(.2,.2); }
50% {transform: scale(.8,.8); }
100% {transform: scale(.2,.2); }
}
<i id="foo"/>