background: #ececec url(images/x/x.jpg) top left repeat-x;
I want to slide it. It's loopy image. I want to slide it from left to right or right to left. It doesen't matter... How can I do this?
You could try using keyframes, here's a good example;
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
If you want to add animation to background then you can use pseudo element and add animation to it
div {
position: relative;
height: 200px;
width: 200px;
border: 1px solid red;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index:-1;
background: url(http://placehold.it/200x200) no-repeat;
-webkit-animation: slide 4s linear infinite;
-moz-animation: slide 4s linear infinite;
animation: slide 4s linear infinite;
}
#-webkit-keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
#-moz-keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
#keyframes slide {
0% {
left: 101%;
}
100% {
left: -101%;
}
}
<div class="slide">
<p>The background image is moving</p>
</div>
Related
I'm trying to get a CSS animation to sync up so that a progress bar fills and a background changes at the same time.
For instance, in my example, it should take 5000ms for the progress bar and then every 5000ms the background image should change.
I thought I had this setup correctly setting my animation duration for the background to 20000ms and each step changing in intervals of 25% but this just isn't syncing correctly.
Am I missing something here or is it not really feasible to get something like this to sync accurately?
.progress-bar {
width: 100%;
height: 30px;
background-color: black;
}
.progress-bar > div {
background-color: blue;
height: 30px;
animation: progress-bar 5000ms linear;
animation-iteration-count: infinite;
}
.container {
width: 100%;
height: 500px;
animation: bg 20000ms linear;
animation-iteration-count: infinite;
}
#keyframes progress-bar {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
#keyframes bg {
0% {background-image: url("https://source.unsplash.com/1600x900/?nature,water");}
25% {background-image: url("https://source.unsplash.com/1600x900/?mountain");}
50% {background-image: url("https://source.unsplash.com/1600x900/?tree");}
75% {background-image: url("https://source.unsplash.com/1600x900/?river");}
}
<div class="container">
<div class="progress-bar"><div></div></div>
</div>
You are almost good, you need to avoid transition by adding more steps
.progress-bar {
width: 100%;
height: 30px;
background-color: black;
}
.progress-bar > div {
background-color: blue;
height: 30px;
animation: progress-bar 5000ms linear;
animation-iteration-count: infinite;
}
.container {
width: 100%;
height: 500px;
animation: bg 20000ms linear;
animation-iteration-count: infinite;
}
#keyframes progress-bar {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
#keyframes bg {
0%,24.9% {background-image: url("https://source.unsplash.com/1600x900/?nature,water");}
25%,49.9% {background-image: url("https://source.unsplash.com/1600x900/?mountain");}
50%,74.9% {background-image: url("https://source.unsplash.com/1600x900/?tree");}
75%,100% {background-image: url("https://source.unsplash.com/1600x900/?river");}
}
<div class="container">
<div class="progress-bar"><div></div></div>
</div>
I have created sample
CodePen here.
I tried below but didn't work.
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
As you will see this sample has 3 images. I give them id = "imge1", "imge2", "imge3"
img3 keeps rotating using keyframe.
I need to show img1 and img2 showing kinda fadein-fadeout effect.
so when img3 rotates to bottom that time may be fadeout img1 and fadeIn img2. (or other way around is fine)
basically 2 images should keep replacing with some fade effect and img3 keeps rotating.
Here is a link I tried but could not achieve solution.
CSS animation, fade in fade out opacity on automated slideshow
CSS how to make an element fade in and then fade out?
also, this needs to be done using pure-css only. I have to put this in nextjs project.
Thanks
You need animation-delay and animation-iteration-count to achieve that
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
figure{
width: 100vw;
height: 50vh;
position: relative;
background: green;
text-align: center;
}
picture{
position: relative;
display: inline-block;
width: 25%;
}
picture img{
width: 100%
}
picture:not(:last-of-type){opacity: 0}
picture:first-of-type{
background: red;
animation: fadeinout 4s linear forwards infinite;
}
picture:nth-child(2){
background: red;
animation: fadeinout 4s 2s linear forwards infinite;/*you need to add the delay here*/
}
picture:last-of-type{
animation: spin 4s linear infinite;
}
figcaption{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}
#keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes spin {
to { transform: rotate(360deg);}
}
<figure>
<picture>img1</picture>
<picture>img2</picture>
<picture>
<img class="img3" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</picture>
<figcaption>Css Labs</figcaption>
</figure>
See below. I added a background color to the third image to make it visible.
#img3 {
background-color: red; /* to make it visible */
}
.flexDisplay {
display: flex;
}
.wrapper {
display: flex;
justify-content: space-evenly;
}
.loginImage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.img1 {
animation: spin 3s linear infinite;
opacity: 0.1;
width: 200px;
height: 200px;
align-items: center;
}
.elementToFadeInAndOut {
width: 200px;
height: 200px;
background: red;
animation: fadeinout 4s linear infinite;
}
#keyframes fadeinout {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<div class="flexDisplay">
<div class="wrapper">
<img id="img1" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle-copy.png " class="loginImage" alt="branding logo" />
<img id="img2" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle.png" class="loginImage elementToFadeInAndOut" alt="branding logo" />
<img id="img3" class="img1" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</div>
</div>
Basically, you need to apply 2 different animation functions to the different elements.
I have used z-index to let the images overlap each other and
set the infinite property for the duration of your animation.
You can set an interval for your images using animation-delay.
.flexDisplay{
display: flex;
background: #f1f1f1;
}
.wrapper{
display: flex
}
.img1{
z-index:3;
}
.loginImage1{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:1;
}
.loginImage2{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:2;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.img1{
animation: spin 3s linear infinite;
width: 200px;
height: 200px;
align-items: center;
}
.img2{
position: relative;
width: 200px;
height: 200px;
}
.elementToFadeInAndOut1 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
}
#-webkit-keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.elementToFadeInAndOut2 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
animation-delay:5s;
}
#-webkit-keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Created this pen: https://codepen.io/spaceCadett/pen/wvKKowL
I have a pretty simple animation that has borders that I created animate in width, in height, and then the center fades in.
The issue I'm having is I can't figure out how to animate from the center, rather than left to right (for the top and bottom borders) and top to bottom (for the side borders).
Is there any simple way to get the animation to happen from the middle?
Example of the code for the top and bottom animation:
#keyframes tb {
0% {width: 0;}
100% {width: 800px}
}
JSFiddle of the code.
You need to animate the left and top, too. For the horizontal bars, set the property left to 400px (50%) on the first keyframe, and to 0px on the last keyframe. Same goes for the vertical bars. Here is your fixed example:
#import url(https://fonts.googleapis.com/css?family=Montserrat:700);
html{
background: black;
}
#holder{
width: 800px;
display: block;
position: relative;
}
#follower {
display: block;
text-align: center;
padding: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
line-height: 70px;
color: #fff;
background: rgba(255,255,255,.1);
animation: main 2s ease-out;
-webkit-animation: main 2s ease-out;
}
#keyframes main {
0% {opacity: 0}
50% {opacity: 0}
100%{opacity: 1}
}
#-webkit-keyframes main {
0% {opacity: 0}
50% {opacity: 0}
100%{opacity: 1}
}
#t, #b {
width: 800px;
height: 2px;
background: #fff;
position: absolute;
display: block;
animation: tb .5s 1 ease-out;
-webkit-animation: tb .5s 1 ease-out;
}
#t {
top: 0;
left: 0;
}
#b{
bottom: 0;
left: 0;
}
#r, #l {
width: 2px;
height: 110px;
background: #fff;
position: absolute;
display: block;
animation: rl 1s 1 ease-out;
-webkit-animation: rl 1s 1 ease-out;
}
#r{
left: 0;
top: 0;
}
#l {
right: 0;
top: 0;
}
#keyframes tb {
0% {
width: 0;
left: 400px;
}
100% {
width: 800px
left: 0;
}
}
#keyframes rl {
0% {height: 0}
50% {
height: 0;
top: 55px;
}
100% {
height: 110px;
top: 0;
}
}
<div id="holder">
<div id="t"></div>
<div id="b"></div>
<div id="r"></div>
<div id="l"></div>
<div id="follower">
Super Long Text Goest Here!
</div>
</div>
You can play around with your timing, and make it start at right point in your animation... using an animation-delay.
E.g.
#keyframes makeFatter {
0% {width: 0;}
100% {width: 800px}
}
#makeMeFat {
animation-name: makeFatter;
animation-duration: 5s;
animation-delay: -2.5s; /* Makes it start at 50% of your animation, i.e. width: 400px */
/* blah blah... rest of the CSS code */
}
i'm trying to mimic a loading function for this animation, so i want the end point of the animation to be the top right edge of the browser.
how do i do this? ie what can i replace "left:1000" with to always be the top right edge of the browser.
.square {
width: 30px;
height: 3px;
background: red;
position: relative;
animation: colors 2s;
-webkit-animation: colors 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes colors {
0% {
left: 0px;
top: 0px;
}
99% {
left: 1000px;
}
}
#-webkit-keyframes colors {
0% {
left: 0px;
top: 0px;
}
99% {
left: 1000px;
}
}
solution is to use both left and margin-left
JSFIDDLE DEMO
.square
{
width: 30px;
height: 3px;
background: red;
position: relative;
animation: colors 2s;
-webkit-animation: colors 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
top: 0px;
margin-left:-30px;
}
#keyframes colors {
0% {left: 30px;}
99% { left: 100%;}
}
#-webkit-keyframes colors {
0% {left: 30px;}
99% { left: 100%;}
}
position:absolute; and right:0 will take you to the right edge of the browser.
.square{
position:absolute;
}
#keyframes colors{
from{
left:0;
top: 0px;
}
to{
right:0;
}
}
After running this, I am assuming you're trying to do something like how YouTube has that loading bar. If so, trying adding this line to your ".square" class.
top: 0px;
And then just remove the "relative" positioning, and change it to "fixed".
Hope that helps, but might not even be related to your problem.
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;
}