I'm new with CSS3 animation and I'm trying to create a simple animation with image sequence using 164 images in the DOM and CSS keyframes to show each one in order.
Everything is working very good but the animation is not running completely, it just show the first 60 images with a duration of 2 seconds.
In fact, if I increase the height in my animation object I can see the other images running the animation in the down side, like if it splits the animation in 3 parts of 60 images each one.
Here is the code that I'm using.
Is it possible that maybe HTML5 only can use 60 images and only show 2 seconds?
I would appreciate some help with this.
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Animation test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="animation-object">
<div class="animation-object__strip">
<img src="images/image1.png">
<!-- Bunch of images of sequence here -->
</div>
</div>
</body>
</html>
CSS file:
html{
background: #ffd25c;
}
.animation-object {
width: 640px;
height: 960px;
display: block;
position: relative;
overflow: hidden;
margin: 0 auto;
}
img {
width: auto;
height: auto;
display: inline-block;
position: relative;
}
.animation-object__strip:nth-of-type(1){
width: 34040px;
display: block;
font-size: 0;
overflow: hidden;
position: relative;
animation-timing-function: step-start;
-webkit-animation: intro 2s steps(30) infinite;
animation: intro 2s steps(30) infinite;
}
#-webkit-keyframes intro {
from { -webkit-transform: translateX(0px); }
to { -webkit-transform: translateX(-19200px); }
}
Related
When combining transform:scale with transition:scale, the animation has two problems, and the problems are similar in Firefox and Chrome.
1) The font/border is extremely blurry during the transition
2) About 0.3s after the transition, the browser 'locks-in' the new scale. It is hard to explain but you will clearly see from the example.
<html>
<body>
<div id="block">
<div class="text">123123</div>
<div class="text">123123</div>
<div class="text">123123</div>
</div>
</body>
</html>
<style>
#block {
margin-top: 100px;
margin-left: 100px;
width: 80%;
height: 300px;
display: flex;
flex-direction: column;
}
.text {
margin: auto;
width: 250px;
font-size: 25px;
transition: transform 0.5s;
border: 1px solid blue;
cursor: pointer;
}
.text:hover {
transform: scale(1.5);
}
</style>
I've tried adding backface-visibility: hidden but this has no effect in Firefox and makes the end of the transition permanently blurred.
Also tried using transform-origin: 100% 0, but no avail.
Take a look at the Codepen:
https://codepen.io/vibonaaci/pen/LKqrPX
Any ideas? If you use the effect on some more stylized elements, the issue really hurts the eyes.
In my CSS parallax, I'm setting the <body> and <html> as follows:
#supports (perspective: 1px) { /* The parallax atmosphere */
html {
height: 100%;
overflow: hidden;
overscroll-behavior: none;
scroll-behavior: smooth;
}
html > body {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: none;
perspective: 1px;
transform-style: preserve-3d;
transform: translateZ(0);
scroll-behavior: smooth;
}
html > body:after {
content: "";
display: block;
clear: both;
}
}
Here's an example of the CSS for one of the parallax layers within (the important part):
#aF-background-layer-1 {
position: absolute;
z-index: -1;
overflow: hidden; /* Because it wraps an SVG */
}
#supports (perspective: 1px) {
#aF-background-layer-1 {
-webkit-transform: translateZ(-72px) scale(73);
transform: translateZ(-72px) scale(73);
will-change: transform;
}
}
There's more CSS, but that is just to give the layers their dimensions, colors, how to treat the SVGs inside and it all works beautifully. The problem is when you scroll to the bottom of the page. In Chrome scrolling stops when you reach the bottom of the <body>. In FireFox and Safari (not sure about IE/Edge or others), scrolling doesn't stop until you've reached to bottom of all elements. This can last for quite some distance if any of the elements are very far off in the distance (moving very slowly on scroll). So the question is:
How do I stop scrolling at the end of the <body>?
I can't just use overflow: hidden; on the <body> as the page won't even scroll. I prefer to do this with CSS, not JS. Here is a sandbox to play in:
https://codepen.io/joerhoney/pen/yRmeOL
In your html head specifying height as 200vh:
<head>
<meta name="viewport" content="width=device-width" height="200vh" user-scalable="yes" initial-scale="1.0">
</head>
change the height on the html and body in your css:
html {
height: 200vh;
}
html > body {
height: 200vh;
}
I'm not sure these are the numbers you want, but you need them to match up.
https://codepen.io/carolmckayau/pen/EdqwmL
I went through almost my entire spritesheet without problem. Everything was uniform. I got to the last few monsters that have varying widths and ran into the problem of being able to see the monster to the left of it. Is there a way to hide the overflow or do I need to change my spritesheet to account for non-uniformity?
.monster {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
background-image: url("https://cdn.discordapp.com/attachments/423540996098228245/494950824963866635/16x16.png");
}
.dragon {
width: 113px;
height: 90px;
animation: dragon .8s steps(2) infinite;
}
#-webkit-keyframes dragon {
from {
background-position: -7885px;
}
to {
background-position: -8115px;
}
}
<div class="monster dragon"></div>
I would put the size and the position in the "keyframes" itself because it lets you more control at the dynamic picture. look at the next code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.monster {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
background-image: url("https://cdn.discordapp.com/attachments/423540996098228245/494950824963866635/16x16.png");
}
.dragon {
height: 90px;
animation: dragon .8s steps(2) infinite;
}
#-webkit-keyframes dragon {
from {
width: 93px;
background-position: -7909px;
}
to {
width: 113px;
background-position: -8115px;
}
}
</style>
</head>
<body>
<div class="monster dragon"></div>
</body>
</html>
I want to make effect of zooming into image with constant speed on image hover.
I'm using scale transform and linear ease for that but still it feels like it's faster in the beginning and slower at the end. I don't understand why is that happening.
It is important that scale goes to high number and my goal is to make animation last for 10 min.
Can you please advise me how to achieve that and is it possible to do that in CSS at all.
HTML
<div class="item">
<img class="full" src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg">
<div class="item-overlay top"></div>
</div>
</body>
CSS
body *,
html * {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
body {
overflow: hidden;
}
.full {
position: absolute;
width: 100%;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
}
.full:hover {
animation: scale 60s linear; //infinite;
}
#keyframes scale {
100% {
-webkit-transform:scale(100);
-moz-transform:scale(100);
-ms-transform:scale(100);
-o-transform:scale(100);
transform:scale(100);
}
}
Here is fiddle example
https://jsfiddle.net/radiolaria/x45z43kc/
There is nothing wrong in general here, and the linear works as expected.
The main problems is that the bigger it gets, the smaller one can see of the actual image, hence it looks like this goes slower.
So if you use ease-in it will look more like the zooming is linear, and an even better solution would be to use cubic-bezier(n,n,n,n), to optimize the timing of the transition even more.
$(document).ready(function() {
$("img").load(function() {
$(this).addClass("zoom");
});
});
body *,
html * {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
body {
overflow: hidden;
}
.full {
position: absolute;
width: 100%;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
}
.full:hover {
animation: scale 20s cubic-bezier(0.550, 0.055, 0.675, 0.190); /*infinite;*/
}
#keyframes scale {
100% {
transform:scale(30);
}
}
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
<div class="item">
<img class="full" src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg">
<div class="item-overlay top"></div>
</div>
And here is a simple tool you can use to create and test customized cubic-bezier
https://matthewlein.com/ceaser/
I have the following code :
<!DOCTYPE html>
<html>
<head>
<title>Void Museum</title>
<meta charset="utf-8">
<style type="text/css">
html * {
margin: 0;
padding: 0;
}
#panel,
#content {
position: absolute;
top: 0;
bottom: 0;
}
#panel {
left: -220px;
width: 250px;
background: #030;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#content {
left: 250px;
right: 0;
background: #003;
}
#panel:target {
left: 0;
background: red;
}
#content:target {
background: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="panel">
LEFT PANEL
</div>
<div id="content">
CONTENT
</div>
</body>
</html>
And two questions :
Why isn't the panel coming out when i click on it ?
How could i force the #content block's left property to 250px when #panel is targeted ? Should i change all this to use relative positions ? If so, how would i force #content not to overflow of the right side of the page ?
This code does work when i use :hover instead of :target so i assume there's something i don't understand about :target.
Thanks in advance :)
The reason it isn't working is because you are using :target as "is-clicked" or similar, which doesn't exist. In CSS, something that can mimic that behaviour is the following:
You make a href to an id (e.g. #panel) and then click it. Now you have a #panel on your url and can start using :target
See here
The text links to #panel, activating :target and allowing it to work as if it was "clicked".