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%;
}
}
Related
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 have a fixed background image within a div that will not display consistently in mobile Safari. It displays fine when a page is refreshed, but the main issue arises when I try to prompt backward and forward to other site pages, which causes the browser to reposition the background's origin point awkwardly.
Note: The first image shows the background image displaying correctly, while the second image displays the transform-origin shift that occurs upon navigating back/forward in the Safari mobile browser, (the main issue).
Here's a snippet, for further reference:
body,
html {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: -2;
}
.sitebg {
background: url("http://maxpixel.freegreatpicture.com/static/photo/1x/Seamless-Repeating-Tiling-Tile-able-Tileable-1889447.jpg");
background-repeat: repeat;
background-position: center;
background-size: 720px 720px;
-webkit-animation: 180s rotatebg infinite linear;
-moz-animation: 180s rotatebg infinite linear;
-o-animation: 180s rotatebg infinite linear;
-ms-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
width: 750px;
height: 750px;
position: fixed;
top: 50%;
left: 50%;
}
.sitebg-parent {
position: absolute;
height: 100%;
width: 100%;
margin: auto;
padding: 0;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#-webkit-keyframes rotatebg {
0% {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
100% {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
}
#keyframes rotatebg {
0% {
transform: rotate(0deg) translate(-50%, -50%);
transform-origin: top left;
}
100% {
transform: rotate(360deg) translate(-50%, -50%);
transform-origin: top left;
}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
Please try the code below.
I've slightly changed your code and removed unnecessary and ivalid css rules.
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
.sitebg {
position: absolute;
top: 50%; left: 50%;
width: 2000px; height: 2000px;
margin: -1000px 0 0 -1000px;
background: url("http://s3.gomedia.us/wp-content/uploads/2008/06/skullbg-green.gif");
transform-origin: 50% 50%;
-webkit-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
}
.sitebg-parent {
position: absolute; z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#-webkit-keyframes rotatebg {
0% {-webkit-transform: rotateZ(0deg)}
100% {-webkit-transform: rotateZ(360deg)}
}
#keyframes rotatebg {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
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>
It's my first time experimenting with css3 animations and I have a question regarding the following setup:
Link to codepen
After item3 the animation rewinds to item1. I wonder if it's possible to let follow the item1 after the item3 without this rewinding, so that item3 also moves to the top and item1 slides in from the bottom again, and so on and on?
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
CSS
#change {
overflow: hidden;
height: 58px;
color: black;
font-size: 3em;
}
#change span {
position: relative;
display: block;
animation: myAnim 10s ease infinite 0s;
-webkit-animation: myAnim 10s ease infinite 0s;
}
#keyframes myAnim {
0% { top: 0px; }
20% { top: 0px; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: 0px; }
}
#-webkit-keyframes myAnim {
0% { top: 0px; }
20% { top: 0px; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: 0px; }
}
Unfortunately, there doesn't seem to be an easy way to do this. If we were using an image, you could easily just take advantage of repeat and force the beginning of the element to start at the end of the element. However, since we aren't using an image, the only solution I can think of would be to use the first element as the last element.
UPDATED EXAMPLE HERE
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
<span>item1</span> <!-- The first element is used as the last element-->
</div>
Modified CSS
#-webkit-keyframes myAnim {
0% { top: 0; }
20% { top: 0; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: -172px; }
}
it didn't let me rest, so i figured out another solution. with no doubled item1, but the missing part in this is that it doesn't start with the item1 being already there at the beginning.
Link to codepen
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
CSS
#change {
overflow: hidden;
height: 58px;
color: black;
font-size: 3em;
position: relative;
}
#change span {
position: absolute;
display: block;
animation: myAnim 9s ease infinite 0s;
-webkit-animation: myAnim 9s ease infinite 0s;
}
#change span:nth-of-type(2) {
animation-delay: 3s;
-webkit-animation-delay: 3s;
top: 58px;
}
#change span:nth-of-type(3) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
top: 58px;
}
#keyframes myAnim {
0% { top: 58px; }
15% { top: 0px; }
33% { top: 0px; }
48% { top: -58px; opacity:1; }
60% { top: -58px; opacity: 0; }
80% { top: 58px; opacity: 0; }
100% { top: 58px; opacity: 1; }
}
#-webkit-keyframes myAnim {
0% { top: 58px; }
15% { top: 0px; }
33% { top: 0px; }
48% { top: -58px; opacity:1; }
60% { top: -58px; opacity: 0; }
80% { top: 58px; opacity: 0; }
100% { top: 58px; opacity: 1; }
}