I am using CSS to make an animation with a 2-dimensional sprite sheet. I was able to animate it with the animation property. However, it only animates the character in the same spot, so I want to move the character to create a walking animation from point A to point B and the second row shows the character turns and faces the opposite side and start walking. So for the second row of the sprite, I hope to make the character to maintain his current position after translating 400px from the first row and move 400px back to the starting point. Is there a way for CSS to do this or I have to convert the sprite sheet to 1-dimensional in order to do it or I can use Javascript to do it?
div.c {
background: url("https://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png");
width: 108px;
height: 140px;
animation: x2 1.5s steps(8) infinite, y2 3s steps(2) infinite;
}
#keyframes x2 {
0% {
background-position-x: 0px;
transform: translatex(0px);
}
100% {
background-position-x: -864px;
transform: translatex(400px);
}
}
#keyframes y2 {
0% {
background-position-y: 0px;
}
100% {
background-position-y: -280px;
}
}
<div class="c"></div>
So if I do it this way the animation begins and the first 4 frames in the first row works fine, but when it comes to the second row the image teleports back to the 0px starting point and translates 400px and the character facing the opposite direction walks backward.
You can achieve the animation using only CSS.
A CSS keyframe needs to know where to start and where to end. At 0% is the start, at 100% is the end of the animation.If you want your animation to 'loop' you need to fit the half of the animation inside the first half of the keyframe and the rest of it inside the other half. Also, you have to take in account the sprite's width when calculating the distance you want to travel.
div.c {
border-style: dotted;
border-color: black;
background: url("https://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png");
width: 108px;
height: 140px;
animation: x2 1.5s steps(8) infinite, y2 3s steps(2) infinite;
}
#keyframes x2 {
0% {
background-position-x: 0px;
}
50% {
background-position-x: -864px;
transform: translatex(508px);
}
100% {
background-position-x: 0px;
transform: translatex(0px);
}
}
#keyframes y2 {
0% {
background-position-y: 0px;
}
50% {
background-position-y: -280px;
}
}
<div class="c"></div>
Related
Is there a way to make the bar on the conic gradient rotate infinitely in a circle? This is how the gradient looks, I just want it to rotate around the center but everything I have tried hasn't worked.
If I understand what you want, just make sure you have (at least) 3 colours, and the final colour is the same as the first
P.S. I added rotation because wasn't sure what you meant by infinite rotation
div {
position:relative;
height:200px;
overflow:hidden;
aspect-ratio: 1 / 1;
border: solid black 1px;
clip-path: border-box;
}
div::before {
z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
hsl(297.3, 84.6%, 20.4%),
hsl(192.6, 51.4%, 58.0%),
hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
#keyframes rot {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div>Hello World</div>
I am trying to mimic the CSS animations from a website here: https://stanographer.com/
I want to copy the way the site:
starts by showing a full screen black div sliding away to the right
"loads" the black background (div tags) behind text (as in "Hi, I'm Stanley Sakai"), expanding left to right and
"loads" the text over the black background div, expanding left to right.
Now you might ask, "Why not just inspect the page, look at the classes on the divs and text, then inspect the CSS sheet in the network tab?" And I've tried that. The CSS looks weird. My friend said it is pre-processed by SASS, whatever that means. Anyway, I cannot decipher the code.
I've been to a few different StackOverflow pages (here's one) & over a dozen different pages on Google. I learned about using keyframes but I haven't figured out how to recreate the effect on Stanographer.com. My friend, who owns the website, also provided this example, but I don't get how to apply it to individual divs. He said something about using the z-index but I just don't see it.
I know that to make the page start with a full black screen & then slide out, I have to trigger a class change using JavaScript. I have:
let blackStuff = document.getElementById("blackness");
window.addEventListener("load", () => {
console.log("loaded");
blackStuff.setAttribute("class", "black-box-out");
},
false
);
.black-box {
position: fixed;
float: left;
top: 0;
width: 100%;
height: 100%;
bottom: 0;
background-color: #000;
z-index: 999999;
-webkit-animation: powerslide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: powerslide 0.5s forwards;
animation-delay: 2s;
}
#-webkit-keyframes powerslide {
100% {
left: 0;
}
}
#keyframes powerslide {
100% {
left: 0;
}
}
.black-box-out {
margin-left: 100%;
animation: slide 0.5s forwards;
-webkit-transition: slide 0.5s forwards;
transition: slide 0.5s forwards;
}
<div id="blackness" class="black-box"></div>
But this just makes the "blackness" div disappear instantly on page load. I want it to slide out. Clearly, I don't get how to use CSS animations.
If you are interested in seeing more of what doesn't work, read on. Otherwise, you can skip this section: it only shows my failed trials.
I've learned how to make a CSS animation expand horizontally from 0:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 50px;
border: 1px solid black;
}
.slide-custom {
width: 500px;
height: 50px;
background: cyan;
position: relative;
-webkit-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
/* moz and webkit keyframes excluded for space */
#keyframes slideIn {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="wrapper slide-custom">
<h1 class="slide-custom">
<span>MEET ROLY POLY.</span>
<!-- expands horizontally from 0 width to 100% width -->
</h1>
</div>
And I've learned to make text "slide in" from the left, though it starts at 100% width when I want it to start at 0% width:
/* CSS */
.test-slide {
animation-duration: 3s;
animation-name: testSlide;
}
#keyframes testSlide {
from {
margin-left: 0%;
width: 50%;
}
to {
margin-left: 100%;
width: 100%;
}
}
<div class="test-slide">
<h1><span>ABOUT.</span></h1>
<!-- will slide in from the left -->
</div>
There's more -- unfortunately none of it mimics the website I'm trying to copy.
Explanation
There are multiple ways to achieve what you want actually. I did not opt to animate width. The first few frames of the animation will be not as expected.
So instead, we can use clip-path. What clip-path basically does is masking. You can "crop" a div such that only a part of it is visible. We will utilise clip-path and ::before or ::after pseudo-element (either is fine) to create this animation. What we need to do:
Create the pseudo-element and position it such that it covers (is on top) the whole animatable element (position: absolute)
Set the pseudo-element's background to black
Using clip-path, mask the animatable element to display no parts of the element (this will also cause the pseudo-element to not be displayed as it is part of the element). The direction of the clipping is important. The direction here is from the right side to the left side.
Using animation and #keyframes, unmask the previously masked div. This will reveal it slowly from the left side to the right side (because initially, we masked it from the right to left; upon unmasking, the reverse direction happens)
Upon unmasking the element, the pseudo-element will be on top of the text we want to display
After a short while later, mask the pseudo-element (not the whole element) from the right direction to the left direction, again using clip-path so that the text seems revealed slowly
It works! However, I recommend reading about clip-path. Also, one really handy clip-path CSS generator I really like to use is this (if you want to clip from the right to left, you should drag the points from the right to left). I also highly recommend reading about CSS positioning (a staple in good CSS animations). You needn't be using z-index: 9999; you generally want to keep track of the z-index you use.
Solution
Here's a working solution using the described method. Try running it.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica;
}
body,
html {
width: 100%;
height: 100%;
}
#wrapper {
background: #555555;
width: 100%;
height: 100%;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#wrapper * {
margin: 5px;
}
.heading {
font-size: 3em;
padding: 10px 5px;
}
.caption {
font-size: 1em;
padding: 5px;
font-family: Courier;
}
.animatable {
position: relative;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
animation: .75s cubic-bezier(1,-0.01,.12,.8) 1s 1 reveal forwards;
}
.animatable::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #20262b;
padding: inherit;
animation: .75s cubic-bezier(1,-0.01,.12,.8) 1.75s 1 hideBlack forwards;
}
#keyframes reveal {
from { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
#keyframes hideBlack {
from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
to { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}
<div id="wrapper">
<div class="heading animatable">Hi, I am Richard!</div>
<div class="caption animatable">I am a person.</div>
</div>
Although the simple animation you wanted can be created using merely CSS, I still suggest you read about how to make animations using JavaScript and the various libraries it has in making animations. This is because once there are many animations and transitions going on, it becomes hard to keep track of animations (especially when you want animations to start after another animation ends). A good library is anime.js (do explore more options before settling on one). Furthermore, notice how the animations only appear upon scrolling down in the website you provided? That's doable only with JS (one such method is using IntersectionObserver API provided by most browsers).
Here you have some CSS3 animations, you trigger that animation when the .entrance-animation gets the .active class.
You'll need an observer to watch when the item gets into view and, when the item is visible, you add the .active class to it.
Hope it helps!
setTimeout(() =>
{
let animate = document.querySelectorAll('.entrance-animation');
animate.forEach(item => item.classList.add('active'));
}
,1000);
.entrance-animation
{
position: relative;
color: blueviolet;
white-space: nowrap;
font-size: 24px;
width: 0;
overflow: hidden;
transition: width 0.5s ease;
}
.entrance-animation::before
{
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background-color: black;
z-index: 10;
transition: width 0.5s ease;
transition-delay: 0.5s;
}
.entrance-animation.active
{
width: 100%;
}
.entrance-animation.active::before
{
width: 0%;
}
<p class="entrance-animation">
Hello
</p>
<p class = "entrance-animation">
Here we are
</p>
You can use CSS3 transitions or maybe CSS3 animations to slide in an element.
For browser support: http://caniuse.com/
I made two quick examples just to show you how I mean.
CSS transition (on hover)
Demo One
Relevant Code
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
In this case, Im just transitioning the position from left: -100px; to 0; with a 1s. duration. It's also possible to move the element using transform: translate();
CSS animation
Demo Two
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: slide 0.5s forwards;
animation-delay: 2s;
}
#-webkit-keyframes slide {
100% { left: 0; }
}
#keyframes slide {
100% { left: 0; }
}
Same principle as above (Demo One), but the animation starts automatically after 2s, and in this case I've set animation-fill-mode to forwards, which will persist the end state, keeping the div visible when the animation ends.
Like I said, two quick example to show you how it could be done.
EDIT: For details regarding CSS Animations and Transitions see:
Animations
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Transitions
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Hope this helped.
This question already has answers here:
How can I connect a CSS animation's end to the beginning so it smoothly continues?
(2 answers)
CSS endless rotation animation
(10 answers)
CSS3 animation - smooth infinite cycle
(2 answers)
How can i make infinite flowing background with only CSS?
(3 answers)
Animate CSS background-position with smooth results (sub-pixel animation)
(3 answers)
Closed 3 years ago.
I need to create an animation of an image that loops infinitely, like a super mario background, where the end of the image is attached to the beggining of the same image, giving the perception that the image never ends, but using css keyframes.
So far I've come to this, but this only makes the image move back and forth.
How can I achieve that?
.waves {
height: 320px;
width: 700px;
position: relative;
top: -325px;
background-repeat: repeat-x;
animation: animatedImage 5s linear infinite;
}
#keyframes animatedImage {
0% { left: 0;}
50%{ left : 500px;}
100%{ left: 0;}
}
for a loop , coming from a side to the other, an ending position for animation is enough.
a background looping with an image at front can do it.
html {
background: white;
}
body {
background: url(https://i.pinimg.com/originals/33/00/3a/33003a1defd04436523771717c661fcc.jpg)
0% 80%;
background-size: 100vw auto;
animation: moves 4s infinite linear;
min-height: 100vh;
margin: 0;
display: flex;
}
#keyframes moves {
to {
background-position: -100vw 80%;
}
}
img {
margin: auto;
max-height: 50vh;
animation: navigate 2s infinite;
}
#keyframes navigate {
/* 0 & 100% might not be needed */
10% {
transform: rotate(3deg) translate(-50px, 2vh);
}
50% {
transform: rotate(-4deg) translate(-2vh, 50px);
}
25%,
75% {
transform: rotate(6deg) translate(50px, 2vh);
}
}
<img src=https://www.orkneyboats.com/sites/default/files/boat-images/ph20_0.png>
you need a few example and test to tuneto your expected result, these are 2 random image from a search engine and an average animation.
If you use first location in last frame, div will be return back.
Did you mean this.
.waves {
height: 700px;
width: 700px;
position: relative;
top: -325px;
background:red;
background-repeat: repeat-x;
animation: animatedImage 5s linear infinite;
}
body{
overflow:hidden;
}
#keyframes animatedImage {
0% { left: 2000px;}
100% { left: -2000px;}
}
<div class="waves"></div>
I need to make precisely this Pyramid-triangle in order to perform animation for this triangle, it becomes very challenging since mine is rotating with X line, but instead I should rotate it with Y line, basically it should rotate or flip to the right side. My main objective is to make it look like in 3D, how to achieve this? or maybe there are some other ways to make this ?
Run the snippet, and please help me what's wrong?
.triangle-pyramid {
transition-property: transform;
transition: 0.6s;
}
.triangle-pyramid:hover {
content:'';
position:absolute;
width:inherit;
height:inherit;
top:50px;
left:-25px;
-webkit-transform-origin: 50% 0% 0;
-moz-transform-origin: 50% 0% 0;
-webkit-transform:rotate3d(1,0,0,-120deg);
-moz-transform:rotate3d(1,0,0,-120deg);
border:1px solid rgb(147,81,166,.5);
display: block;
}
<div>
<img class="triangle-pyramid" src="https://i.stack.imgur.com/J1NxO.png" alt="objectives SMM" >
</div>
I have a DIV with some text in it. I added a background image on it. Now I want to keep scrolling my DIV background image from bottom to top smoothly. For this purpose, I searched for the code and I found some codes...
<style type="text/css">
#moving_bg {
background-image:url('http://i.imgur.com/zF1zrkC.jpg');
background-repeat:repeat-y;
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
}
</style>
<div id="moving_bg">
<h2>This is my DIV text that I want do not want to move/animate.</h2>
</div>
CODE 1:) http://jsfiddle.net/ZTsG9/1/ This is a code that I found but this one have some problems with me. First of all its moving horizontally and second is that its making image width doubled to 200% that I dont want also.
CODE 2:) http://jsfiddle.net/hY5Dx/3/ This one is also moving horizontally and not making the image width doubled. But its JQuery that I dont want.
I want only CSS3 or JavaScript with HTML code to move my background image in DIV from bottom to top without doubling the image width. Is this possible in these two web languages...???
If you can get away with using 2 divs you can get it to work like this:
Working Example
html, body {
height: 100%;
margin: 0;
}
.outer {
height:100%;
overflow: hidden; /* hide the overflow so .inner looks like it fits in the window*/
}
.inner {
height:200%; /* the inner div will need to be twice as tall as the outer div */
width:100%;
-webkit-animation:mymove 5s linear infinite;
animation:mymove 5s linear infinite;
background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
background-size: 100% 50%; /* 50% height will be 100% of the window height*/
}
#-webkit-keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
As per Muhammad's request i'll add my fiddle as an answer.
VanillaJS using requestAnimationFrame for that butter smooth slide :)
http://jsfiddle.net/hY5Dx/103/
Code to please SO:
var y = 0;
requestAnimationFrame(move);
var body = document.body;
function move(){
y++;
body.style.backgroundPosition = '0 ' + y + 'px';
requestAnimationFrame(move);
}
As there is too much comments after #Skynet answer, here I add the one I wrote following his base structure.
So in CSS, you can make use of animation CSS property
This property still is vendor-prefixes dependant.
Basically for what you want to do, you have to animate the background-position property, only on y axis.
Here is the CSS code
/* Following defines how the animation 'mymove' will run */
#keyframes mymove {
/* 0% is the beginning of animation */
0% {
background-position: 0 0;
}
/* This is the end… where we set it to the size of the background image for y axis (0 being the x axis) */
100% {
background-position: 0 860px;
}
}
/* same for webkit browsers */
#-webkit-keyframes mymove {
0% {
background-position: 0 0;
}
100% {
background-position: 0 860px;
}
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
height: 366px;
text-align:center;
/* Here we assign our 'mymove' animation to the class .view, we ask it to last 3 seconds, linearly (no ease at start or end), and repeating infinitely */
animation: mymove 5s linear infinite;
/* again webkit browsers */
-webkit-animation:mymove 5s linear infinite;
background: url('http://i.imgur.com/zF1zrkC.jpg');
}
And here we are.
The other answers are ok but as mentionned, using multiple divs isn't always possible and the use of requestAnimationFrame() is also browser specific (Paul Irish has good polyfill for this).
Furthermore, I'm not sure incrementing a var infinitely is a good solution : it will block near 6100000px, and its much more code to change the speed or to take control over the animation.
<div class="view" style="background-image: url('http://i.imgur.com/zF1zrkC.jpg')">According to a new report from AnandTech.</div>
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
-webkit-animation:mymove 5s linear infinite;
/* Safari and Chrome */
animation:mymove 5s linear infinite;
background-size: 200% 100%;
background-repeat: repeat-y;
}
#keyframes mymove {
100% {
transform: translate3d(0px, -400px, 0px);
}
}
#-webkit-keyframes mymove
/* Safari and Chrome */
{
100% {
transform: translate3d(0px, -400px, 0px);
}
}
check jsfiddle