Trying to implement a sprite sheet animation via css. I have followed this example
https://codepen.io/SitePoint/pen/zxXrzP
However, my animation is sliding vertically and I can not understand why. Any input appreciated.
.parent {
position: relative;
width: 70%;
margin: -10% auto 0 auto;
/* positioning tweak */
}
.parent:before {
content: "";
display: block;
padding-top: 61.37%;
}
.ryu {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("http://dev.froststudio.se/wp-content/uploads/2020/06/frostcell_v03.png");
background-size: 100%;
animation: sprite 4s steps(79) forwards;
}
#keyframes sprite {
from {
background-position: 0 0%;
}
to {
background-position: 0 100%;
}
}
http://dev.froststudio.se
Cheers,
Related
I have the following overlay
<div id="overlay"></div>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
Which pops up instantly. I would like to make this overlay cover the screen with an animation effect, appear from right to left within 1000 miliseconds.
I understand this is feasible with jQuery but I dont want to install it in my Angular app. Is it possible to make it with typescript together with CSS?
Thanks.
Yes, you can use animation with #keyframes:
#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
animation: slide-in 1s both;
}
#keyframes slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
<div id="overlay"></div>
On my website, I'm trying to make a simple white full-screen loader with one <div> element, but instead of going to the right at the end, the <div> element goes partially to the left, then snaps to the right. Any ideas on how to fix this? Here's a demo:
body {
background-color: #121212;
}
div#l {
position: absolute;
height: 100%;
top: 0;
background-color: white;
animation: loader 2s infinite;
}
#keyframes loader {
from {
left: 0;
width: 0;
}
49% {
width: 100%;
left: 0;
}
51% {
width: 100%;
right: 0;
}
to {
width: 0;
right: 0;
}
}
<div id='l'></div>
You should divide your keyframe in three equal parts.
from to 33%: the white div appear
from 33% to 66%: change the position of the div
from 66% to to: the white div disappear
Edit you keyframe like this:
#keyframes loader {
from {
left: 0;
width: 0;
}
33% {
width: 100%;
left: 0;
}
66% {
width: 100%;
right: 0;
}
to {
right: 0;
width: 0;
}
}
body {
background-color: #121212;
}
div#l {
position: absolute;
height: 100%;
top: 0;
background-color: white;
animation: loader 2s infinite;
}
#keyframes loader {
from {
left: 0;
width: 0;
}
33% {
width: 100%;
left: 0;
}
66% {
width: 100%;
right: 0;
}
to {
right: 0;
width: 0;
}
}
<div id='l'></div>
As you can see in this way the speed of the animation is not linear, and it is not the result we want.
I sugget you to divide the keyframe in two parts:
from to 50%: the white div appear
from 50% to to: the white div move itself to it's max left position
Therefore:
#keyframes loader {
from {
left: 0;
width: 0;
}
50% {
left: 0;
width: 100%;
}
to {
left: 100%;
width: 0;
}
}
body {
background-color: #121212;
}
div#l {
position: absolute;
height: 100%;
top: 0;
background-color: white;
animation: loader 2s infinite;
}
#keyframes loader {
from {
left: 0;
width: 0;
}
50% {
left: 0;
width: 100%;
}
to {
left: 100%;
width: 0;
}
}
<div id='l'></div>
I built an animation for my background but is not responsive and I don't know how to make it.
I used Bootstrap 4 and CSS as my main design resources.
The CSS I sued as follows:
/* Animation GLitch */
.animation {
position: relative;
width: 100%;
height: 100vh;
background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
max-width: 100%;
max-height: 100%;
margin: 0 auto;
overflow: hidden;
}
.animation:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
opacity: 0.5;
mix-blend-mode: hard-light;
display: block;
}
.animation:hover:before {
animation: animate 0.2s linear infinite;
}
#keyframes animate {
0% {
background-position: 0 0;
filter: hue-rotate(0deg);
}
10% {
background-position: 5px 0;
}
20% {
background-position: -5px 0;
}
30% {
background-position: 15px 0;
}
40% {
background-position: -5px 0;
}
50% {
background-position: -25px 0;
}
60% {
background-position: -50px 0;
}
70% {
background-position: 0 -20px;
}
80% {
background-position: -60px -20px;
}
81% {
background-position: 0 0;
}
100% {
background-position: 0 0;
filter: hue-rotate(360deg);
}
}
The animation consists of 2 same pictures that create this glitch effect but I don't know how to make it responsive.
The snippest it is working here:
https://codepen.io/Jakub41/pen/abbwxWb
I tried to use the sizing but it is modifying my effect I would like to keep the same effect on all screens
I do not quite understand in which way you want it to be responsive but try adding these lines after background: url(...) both times:
background-repeat: no-repeat;
background-size: cover;
Look here for more information about the background-size property.
Also the second answer of this question might interest you.
I have the following codepen:
http://codepen.io/AlexanderWeb00/pen/GWprqx
I am trying to make it look like a gif so that I can pause it on hover.
However the result is not as expected: it almost looks like a vertical slider but it should only behave like a gif. It needs to be responsive which it is at the moment.
It should show one full t-shirt at the time
body {
padding: 0;
text-align: center;
}
.parent {
position: relative;
width: 70%;
margin: -10% auto 0 auto; /* positioning tweak */
}
.parent:before {
content: "";
display: block;
padding-top: 60%;
}
.children {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('http://imageshack.com/a/img922/8632/ME6qgO.png') no-repeat 0 0%;
background-size: 100%;
animation: sprite 5s steps(5) infinite;
}
#keyframes sprite {
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
i think my implementation of an animated hexagon has several cross-browser-problems:
http://jsbin.com/mojavowapi/1/edit?css,output
.hexagon {
position: relative;
width: 173px;
height: 300px;
background-image: url(https://live.tlprod.de/temp/glas.jpg);
background-size: auto 100%;
background-position: 50% 50%;
transition: all 2s linear;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: inherit;
}
.hexLeftBox, .hexRightBox {
overflow: hidden;
transform: scaleY(1.6) rotate(-45deg);
background: inherit;
top: 27.9%;
position: absolute;
display: inline-block; /* let the block get the width of the containing image */
z-index: 1;
height: 44%;
}
.hexLeft, .hexRight {
width: auto;
height: 100%; /* get full height of parent element, set width to aspect ratio 1:1 */
}
.hexLeftBox {
transform: scaleY(1.6) rotate(-45deg) translate(-35.5%,-35.5%);
}
.hexRightBox {
right: 0;
transform: scaleY(1.6) rotate(-45deg) translate(35.5%,35.5%);
}
.hexLeftBox:after, .hexRightBox:after {
content: "";
position: absolute;
width: 142%;
height: 142%;
transform: rotate(45deg) scaleY(1) scaleX(1.6) translate(-50%,0%);
transform-origin: 0 0;
background: inherit;
transition: all 2s linear;
}
.hexLeftBox:after {
background-position: -7% top;
}
.hexRightBox:after {
background-position: 107% top;
}
.hexagon:hover {
width: 300px;
height: 350px;
}
.hexagon:hover .hexLeftBox:after {
background-position: -35% top;
}
.hexagon:hover .hexRightBox:after {
background-position: 135% top;
}
.hexagon2 {
width: 300px;
height: 350px;
margin-top: 40px;
}
.hexagon2 .hexLeftBox:after {
background-position: -35% top;
}
.hexagon2 .hexRightBox:after {
background-position: 135% top;
}
In this example the above hexagon changes on hover to the -same- size as the other loaded with.
In Chrome 50 the background image of the after-elements disappear AND the aspect ratio crashes
In IE 11 only the aspect ratio of the edges crashes
In Firefox 46 all works fine
..but the funny thing: In all Browser the second static version with the same values as the hover is working fine.
Are there some problems known and fixable?
The crashed aspect ratio is a webkit-optimizing-issue.
It could be fixed only with switching to a javascript-animation with forcing the rerendering via:
$('body').css('display', 'table').height();
$('body').css('display', 'block');
And with jQuery you can do this in the progress-Parameter of the animate()-function.
Switching to a javascript-animation also eleminates the disappearing after-elements.