Let me paste my code first
p{
width: 100px;
margin:auto;
text-align:center;
}
p:hover{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: -100% 6px;
animation-name: in;
animation-duration: 1s;
/*animation-direction: reverse;*/
}
#keyframes in {
0% { background-position: -100% 6px; }
100% { background-position: 100% 6px; }
}
<p>TESTING</p>
Demo
I want the background to animate from left to right but failed to acquire that. I tried animation-direction: reverse; without any luck.
Can you guys please guide me to solve this?
Thanks
I Think Its Work Fine
p:hover{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: -100% 1px;
animation-name: in;
animation-duration: 1s;
animation-direction: reverse;
}
#keyframes in {
0% { background-position: 100% 6px; }
100% { background-position: 200% 6px; }
}
p{
width: 100px;
margin:auto;
text-align:center;
}
p:hover{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: -100% 1px;
animation-name: in;
animation-duration: 1s;
animation-direction: reverse;
}
#keyframes in {
0% { background-position: 100% 6px; }
100% { background-position: 200% 6px; }
}
<p>TESTING</p>
Try to apply background-position: 200% 6px; for the keyframe 100%.
p{
width: 100px;
margin:auto;
text-align:center;
}
p:hover{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: -100% 1px;
animation-name: in;
animation-duration: 1s;
animation-direction: reverse;
}
#keyframes in {
0% { background-position: 100% 6px; }
100% { background-position: 200% 6px; }
}
<p>TESTING</p>
Here is the codepen demo
Related
hy guys this is a simple css background animation script everything is working fine but now i want to Set this background in 50% of the width of the window i tried a several way but i am not able to do this and now i am totally frustrated ... any kind of suggestion will help in my project thnx in advance.
<style>
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;
}
</style>
<body>
<h1>Pure CSS3 Animated Gradient Background</h1>
</body>
</head>
Added an extra div with css properties
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
to achieve 50% width and 100% height.
body {
width: 100wh;
height: 90vh;
color: #fff;;
}
.width-50 {
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;
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#-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;
}
<body>
<div class="width-50">
<h1>Pure CSS3 Animated Gradient Background</h1>
</div>
</body>
Hello i have some issues with my code because animation won't work here's my code:
background-image:url(industry2.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border:1px solid red;
-webkit-animation: fadein 2s ease-in ;
-moz-animation: fadein 2s ease-in ;
animation: fadein 2s ease-in ;
width:500px;
height:200px;
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
position:absolute;
top:2700px;
left:1300px;
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
you see i don't get animation working and i don't know what to do...
You had not closed the #keyframes. I have removed the left and top position for visibility purpose.
.container {
background-image: url("http://via.placeholder.com/500x200");
background-size: cover;
border: 1px solid red;
animation: fadein 2s ease-in;
width: 500px;
height: 200px;
background-repeat: no-repeat;
background-position: left top;
padding-top: 68px;
position: absolute;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="container">Hello</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>
I've created this snippet on Codepen: the earth rotates and the car moves. However, when car moves it makes the earth rotate too. I want all elements to go their own path.
Why does the car affect the earth, and how can that be avoided?
body {
background: url(https://news.vanderbilt.edu/files/NASA_SMBH1.jpg);
background-size: 1000px;
}
#firstimg {
background-image: url(http://www.21tech.ir/dfxhfgh.gif);
position: absolute;
background-repeat: no-repeat;
background-size: 100px;
animation: anim1 14s infinite linear;
margin: 40px;
}
#earth {
margin-left: 100px;
width: 500px;
height: 500px;
background: url(http://www.drodd.com/images14/map-of-earth1.jpg);
border-radius: 50%;
background-size: 1000px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
filter: brightness(50%);
}
#keyframes rotate {
from {
background-position-x: 0px;
}
to {
background-position-x: 1000px;
}
}
#keyframes anim1 {
0%,
100% {
transform: translate(0, 0) rotate(0deg)
}
50% {
transform: translate(20px, 20px) rotate(10deg)
}
}
<div id="firstimg">
<div>
<div id="earth"></div>
You have not closed you firstimg div tag, hence it runs under a single div
<div id="firstimg"></div>
<div id="earth"></div>
Follow Codepen
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 */
}