I Want the motion to work, but the background image position is fixed and does not move, why ?
#-webkit-keyframes anima {
from {
background-position: left;
} to {
background-position: right;
}
}
#bando {
border-radius: 4px;
background-image: url(neon.jpg);
background-size: 120%;
width: 600px;
padding-top:40px;
padding-bottom:40px;
margin-bottom: 10px;
font-size: 30px;
height:200px;
animation-name: anima;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
Thanks for helping
For this to work, make sure the image is bigger (or smaller) than the element, like in below sample, where the element is 600px wide and the image 800px
#-webkit-keyframes anima {
from {
background-position: left;
}
to {
background-position: right;
}
}
div {
border-radius: 4px;
background-size: 120%;
background: url(http://lorempixel.com/800/280/nature/1/);
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 10px;
font-size: 30px;
height: 200px;
animation-name: anima;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
<div></div>
Another option is to use a pseudo element, as with that you can use transform to move the image, which I recommend and is a far more smoother and efficient way to do it
div {
position: relative;
border-radius: 4px;
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 10px;
font-size: 30px;
height: 200px;
overflow: hidden;
}
div::after {
content: '';
position: absolute;
border-radius: 4px;
background-size: 120%;
background: url(http://lorempixel.com/800/280/nature/1/);
width: 800px;
height: 100%;
animation-name: anima;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
#-webkit-keyframes anima {
from {
transform: translateX(0);
}
to {
transform: translateX(-200px);
}
}
<div></div>
Related
I've spent the past hour trying to find a way to get a sliding animation from bottom to top using only CSS. It's supposed to be a test tube with fluid filling it. (This is what I want it to look like), however during the animation it overflows around the edges at the bottom and doesn't sit flush (like this).
HTML & CSS:
.testTube #border {
width: 40px;
height: 150px;
margin-top: 15px;
background-color: white;
border: 2px solid black;
border-radius: 5px 5px 25px 25px;
position: absolute;
}
.testTube #fluidLeft {
width: 20px;
height: 100px;
margin-left: 2px;
background-color: #ff007f;
border-radius: 0% 0% 0% 25px;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.testTube #fluidRight {
width: 20px;
height: 0px;
margin-left: 22px;
background-color: #ff1a8c;
border-radius: 0% 0% 25px 0%;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes fluid {
from {
height: 0px;
margin-top: 167px;
}
to {
height: 100px;
margin-top: 67px;
}
}
<div class="testTube">
<div id="border"></div>
<div id="fluidLeft"></div>
<div id="fluidRight"></div>
</div>
You can move the #fluidLeft and #fluidRight divs into the #border div. That way, you can add "overflow: hidden" on to the border div (now the parent) which will make it so the fluid divs (now children of the border div) don't overlap outside of the border. I also tweaked the "margin-left" on the fluids by 2px so it was centered in the tube.
.testTube #border {
width: 40px;
height: 150px;
margin-top: 15px;
background-color: white;
border: 2px solid black;
border-radius: 5px 5px 25px 25px;
position: absolute;
overflow: hidden;
}
.testTube #fluidLeft {
width: 20px;
height: 100px;
background-color: #ff007f;
border-radius: 0% 0% 0% 25px;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.testTube #fluidRight {
width: 20px;
height: 0px;
margin-left: 20px;
background-color: #ff1a8c;
border-radius: 0% 0% 25px 0%;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes fluid {
from {
height: 0px;
margin-top: 167px;
}
to {
height: 100px;
margin-top: 67px;
}
}
<div class="testTube">
<div id="border">
<div id="fluidLeft"></div>
<div id="fluidRight"></div>
</div>
</div>
I am trying to make a loading screen using CSS Animations. The screen is 4 different bars shrinking and growing. I want to arrange them in this formation where they form a square. I use absolute positioning to position them, but I would like to know if there is a better way. I managed to do 3 bars with display and float but did not manage to do the last one.
Now, the animations are not running at all. Can somebody help me?
Code:
https://codepen.io/ngmh/pen/gxewJK
HTML:
<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>
CSS:
#top{
background-color: red;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
left: 37.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom{
background-color: yellow;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
top: 112.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#left{
background-color: blue;
width: 25px;
height: 100px;
border-radius: 12.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#right{
background-color: green;
width: 25px;
height: 100px;
border-radius: 12.5px;
position: absolute;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes loading-1{
0%:{width: 100px;}
50%:{width: 10px;}
100%:{width: 100px;}
}
#keyframes loading-2{
0%:{height: 100px;}
50%:{height: 10px;}
100%:{height: 100px;}
}
There shouldn't be any colon : after the percent sign % in your #keyframes rules
#top{
background-color: red;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
left: 37.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom{
background-color: yellow;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
top: 112.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#left{
background-color: blue;
width: 25px;
height: 100px;
border-radius: 12.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#right{
background-color: green;
width: 25px;
height: 100px;
border-radius: 12.5px;
position: absolute;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes loading-1{
0% {width: 100px;}
50% {width: 10px;}
100% {width: 100px;}
}
#keyframes loading-2{
0% {height: 100px;}
50% {height: 10px;}
100% {height: 100px;}
}
<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>
Using pseudo elements would make the markup smaller and with that maybe more maintainable.
The outer does not use absolute positioning and will flow better with the rest of the content.
.outer {
position: relative;
}
.outer div,
.outer::before,
.outer::after,
.outer div::before,
.outer div::after {
content: '';
position: absolute;
border-radius: 12.5px;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.outer::before {
background-color: red;
width: 100px;
height: 25px;
left: 37.5px;
animation-name: loading-1;
}
.outer::after{
background-color: yellow;
width: 100px;
height: 25px;
top: 112.5px;
animation-name: loading-1;
}
.outer div::before{
background-color: blue;
width: 25px;
height: 100px;
animation-name: loading-2;
}
.outer div::after{
background-color: green;
width: 25px;
height: 100px;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
}
#keyframes loading-1{
0% {width: 100px;}
50% {width: 10px;}
100% {width: 100px;}
}
#keyframes loading-2{
0% {height: 100px;}
50% {height: 10px;}
100% {height: 100px;}
}
<div class="outer"><div></div></div>
hello i want to make my background move but the animation is not active. Why ?
#keyframes anima {
0% {
background-position-y: 0px;
} 100% {
background-position-y: -150px;
}
}
#bando {
border-radius: 4px;
background-image: url(neon.jpg);
background-size: 130%;
width: 600px;
padding-top:40px;
padding-bottom:40px;
margin-bottom: 10px;
font-size: 30px;
height:150px;
animation-name: anima;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;
}
Thanks in advance to help me because I am blocked on it since 4 hours
try this in https://jsfiddle.net/526vttyg/
You're missing an animation-duration, and you have to specify that, otherwise the animation won't do anything. The default animation-duration is 0
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
#bando {
border-radius: 4px;
background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);
background-size: 130%;
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 10px;
font-size: 30px;
height: 150px;
animation-name: anima;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;
}
#keyframes anima {
0% {
background-position-y: 0;
}
100% {
background-position-y: -150px;
}
}
<div id="bando"></div>
Demo on CodePen
<pre>
.parent
border: 1px solid tomato
height: 300px
margin: 0 auto
margin-top: 30px
width: 80%
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
.box-1
background-color: lightblue
right: 60vw
animation-duration: 6s
#keyframes falling
0%
top: -10vh
100%
top: 90vh
.box-2
background-color: lightgreen
right: 70vw
animation-duration: 8s
#keyframes falling
0%
top: -10vh
100%
top: 90vh
</pre>
As you can see in the demo, the animation speed of the cube is slowing down the closer it gets to the bottom.
I'd like to make animation the same speed during the fall.
Thank you.
The default animation-timing-function in CSS is ease - accelerate in the start, slow after the middle. You need a linear timing function, that has a constant speed.
Change the box timing function to linear (pen):
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
animation-timing-function: linear
You can use animation function linear. Have a look at the snippet below:
.parent {
border: 1px solid tomato;
height: 300px;
margin: 0 auto;
margin-top: 30px;
width: 80%;
}
.box {
width: 50px;
height: 50px;
position: absolute;
animation-name: falling;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box-1 {
background-color: lightblue;
right: 60vw;
animation-duration: 6s;
}
#keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
.box-2 {
background-color: lightgreen;
right: 70vw;
animation-duration: 8s;
}
#keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
<div class="parent">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
Hope this helps!
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}