i want to use this code , but i want animation goes vertical.
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
i found this code here : http://jsfiddle.net/e3WLD/3/
thanks for help
The background-position accepts 2 parameters :
the first one for horizontal positioning
and the second one for vertical positioning
More info on background-position on W3schools
So by adding a second parameter to the background-position property you can
animate your background vertically.
I edited your JSFiddle
To this:
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px;
background-repeat: repeat-y;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 1000px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
I am able to do vertical by transforming the element 90 degrees.
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
Working Fiddle
You are only setting and animating one of the background position values so it assumes that are referreing to the first one (x-position) and the other defaults to auto (I think).
Try this
**JSFiddle Demo**
CSS
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px; /* note */
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 1000px; }
}
#-moz-keyframes myanim
{ 0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
#-o-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
#keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
If you want to set it to vertically rotate like this: http://jsfiddle.net/jme11/AYKC2/
Then you need to set the repeat to repeat-y and change the background position to match the element's height:
#keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 131px; } /* set this to the height of the image */
}
Related
I have created a div with a background image. Using keyframe animation I want it to move vertically up continuously, which it does however at the end of the frame it jumps then continues. I am new with keyframes. I can not use JS.
I have tried looking at the questions on here but they are mainly focused on sliders.
This is my code so far:
<style>
#animate-area {
background-image: url(/image.png);
width: 100%;
height: 500px;
background-position: 0px 0px;
background-repeat: repeat-x;
-webkit-animation: animatedBackground 5s ease-in-out infinite;
-moz-animation: animatedBackground 5s ease-in-out infinite;
animation: animatedBackground 5s ease-in-out infinite;
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
</style>
<div id="animate-area"></div>
As soon as the frame has finished it jumps and then continues. Is it possible to for it to continuously loop without jumping with a background image? If so, how?
Live example to continuously move up :
#animate-area {
background-image: url('https://pt.freelogodesign.org/Content/img/logo-ex-2.png');
width: 100%;
height: 500px;
background-position: 0;
animation: slideup 5s linear 1s infinite;
position:absolute;
}
#keyframes slideup {
0% { background-position: 0 0; }
50% { background-position: 0 -500px; }
100% { background-position: 0 -900px; }
}
<div id="animate-area"></div>
you can use twice the same image with opposite coordonates to move from/to :
#animate-area {
background-image: url(http://dummyimage.com/100&text=img_1), url(http://dummyimage.com/100&text=img_2);
width: 100%;
height: 500px;
background-position: 0px 0px, 0 -100%;
background-repeat: repeat-x;
animation: animatedBackground 5s ease-in-out infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0, 0 -100%;
}
to {
background-position: 0 100%, 0 0;
}
}
<div id="animate-area"></div>
different text is used to show what happens
How do I slow down this animation and make it smoother for all browsers? Is there any possible way?
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 10s linear infinite alternate;
}
<div id="animate-area"></div>
Simply give the animation a longer duration.
The following changes it from 10s to 30s:
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 30s linear infinite alternate;
}
<div id="animate-area"></div>
how to make use of gradient animation effects like this in react component in-line. I have to make use of below CSS based gradient animation effects as inline in react component. Is there any specific package(s) available for that?
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
Take a look at this:
https://codepen.io/anon/pen/BYvVqP
I just used a state to store the classes.
className={this.state.animationClass}
Background image animation not working in Firefox and I don't want the background repeat image in animation.
Here is url: http://trekoholic.com/site/
body {
background:url(../img/bg.jpg);
-webkit-animation: slide 30s linear infinite;
}
#-webkit-keyframes slide {
0%{ background-position: left 20%; }
25%{ background-position: 100px 0; }
50%{ background-position: 200px 0; }
100%{ background-position: 300px 0; }
}
#-moz-keyframes slide {
0%{ background-position: left 20%; }
25%{ background-position: 100px 0; }
50%{ background-position: 200px 0; }
100%{ background-position: 300px 0; }
}
Just add one line:
body{
background:url(../img/bg.jpg);
-webkit-animation: slide 30s linear infinite;
animation: slide 30s linear infinite;
}
i am trying to create a very simple animation sequence base on this little article (http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps) but nothing seems to animate.
my css code is the following
.mainContent {
width:960px;
height:388px;
background:url('http://www.wearewebstars.dk/codepen/img/s1.png') repeat-x 0 0;
background-color:#58e9a3;
-webkit-animation: play 1s linear infinite;
-moz-animation: play 1s linear infinite;
-ms-animation: play 1s linear infinite;
animation: play 1s linear infinite;
}
#keyframes play {
0% {
background-position: 0px 0px;
}
50% {
background-position: 0px -190px;
}
100% {
background-position: 0px -300px;
}
}
An example of my code (css+html) can be found here
http://jsfiddle.net/atragan/pqg2yrpL/
Just also adding prefix to your keyframes like this:
#-webkit-keyframes play {
0% {
background-position: 0px 0px;
}
50% {
background-position: 0px -190px;
}
100% {
background-position: 0px -300px;
}
}
#-moz-keyframes play {
...
}
#-o-keyframes play {
...
}
#keyframes play {
...
}
DEMO : http://jsfiddle.net/pqg2yrpL/1/