I've made an sprite sheet animation in css and I want it to run only when the page is scrolled, the animation is fixed, how could i do that?
here is my animation
#me{
background-image: url("walkingirl.png");
width: 200px;
height: 509px;
top: -151px;
left: 180px;
position: fixed;
animation: play 2s steps(10) infinite;
}
#keyframes play {
from { background-position: 0 0; }
to { background-position: -2000px 0; }
}
Related
I ran into a problem, I made a simple animation using the Shape Shifter site and I want this animation to start on my site when I hover over the picture, but so that when I remove the cursor from the picture, the animation starts in the reverse order and that it is smooth.
At the moment, I managed to make this animation run when the cursor is hovered, but when I remove it from the picture, the animation immediately returns to the first frame
Here is the code that I wrote
.box {
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
#keyframes playStart {
0% {
background-position: 0px 0px;
}
100% {
background-position: -15360px 0px;
}
}
#keyframes playEnd {
0% {
background-position: -15360px 0px;
}
100% {
background-position: 0px 0px;
}
}
.anim_image {
animation-duration: 1000ms;
animation-timing-function: steps(60);
width: 256px;
height: 256px;
background-repeat: no-repeat;
background-image: url(http://cu14284.tmweb.ru/Image/sprite_60fps.svg);
animation-fill-mode: forwards;
}
.anim_image:hover {
animation-name: playStart;
}
.anim_image {
animation-name: playEnd;
}
<div class="box">
<div class="anim_image"></div>
</div>
We are trying to animate a div as follows:
1- Stretch from 0 to 100% (from left to right)
2- Then shrink from 100% to 0 (also from left to right)
3- then repeat.
We have the following div:
div {
position: absolute;
height: 2px;
background: #c60000;
left: 0;
top: 0;
color: #789;
width: 0;
animation-duration: 5s;
animation-name: progress;
animation-iteration-count: infinite;
}
#keyframes progress {
50% {
// transform-origin: right top;
width: 100%;
}
}
<div></div>
But no matter what we do using transform-origin and floats, positioning etc, the second part shrinks from right to left. i.e. the left side is always the anchor, whereas we want the right side to be the anchor when shrinking is taking place.
Would appreciate any help.
div {
position: absolute;
height: 2px;
background: #c60000;
top: 0;
color: #789;
animation-duration: 5s;
animation-name: progress;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes progress {
0% {
left: 0;
width: 0;
}
50% {
right: 0;
width: 100%;
}
100% {
right: 0;
width: 0;
}
}
<div></div>
I try to animate a sprite with auto fullscreen size
but I don't know how can I do to read this sprite always in fullscreen (i.e. 100% of width and height of screen, and auto adapte if resizing)
any idea to autosize sprite ?
#-moz-keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#-webkit-keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#loader
{
position: fixed;
z-index: 999999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
-webkit-animation: play 2s infinite steps(11);
-moz-animation: play 2s infinite steps(11);
-o-animation: play 2s infinite steps(11);
animation: play 2s infinite steps(11);
}
<div id="loader"></div>
You're almost there!
There should be steps(10) as the start position is not a step actually.
BTW, z-index: 999999999999 looks paranoid to me =)).
#keyframes play {
100% {
background-position: 100%;
}
}
#loader
{
position: absolute;
z-index: 9;
top: 0; right:0;
bottom:0; left: 0;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
animation: play 1s infinite steps(10);
}
<div id="loader"></div>
Update
Question bonus:
#keyframes play {
99.99% {
background-position: 120%;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
}
100% {
background-image: none;
z-index: -1;
}
}
#loader {
position: fixed;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
animation: play 2s steps(12) forwards;
}
body {
background: url(https://picsum.photos/640/480) 50% 50% /cover
<div id="loader"></div>
This code takes a ball and moves it to the right and back again. How can I get it to move to the right, and stay there?
http://codepen.io/chriscoyier/pen/pBCax
You can fiddle with a Live version of the output there.
body {
padding: 30px;
}
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
#keyframes move {
50% {
top: 200px;
left: 130px;
}
}
The css code says 'infinite' and when I delete that, it moves the ball to the right, and then back to where it was one time. I'd like it to move to the right, and just stay there.
Replace infinite with forwards and add a from and to to your #keyframes
Adjust the top, left values as necessary.
See below:
body {
padding: 30px;
}
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease forwards;
}
#keyframes move {
from {
top: 0px;
left: 10px;
}
to {
top: 200px;
left: 130px;
}
}
<h1>Animate with Top/Left</h1>
<div id="animate"></div>
Here you go:
animation: move 3s ease forwards;
http://codepen.io/anon/pen/yebvZx
You can read about the animation-fill-mode property here:
https://drafts.csswg.org/css-animations-1/#animation-fill-mode
forwards -
After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended.
Your are looking for:
animation-fill-mode: forwards;
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>