Why does keyframe-based animation slow down in the end? - html

I have this simple loading indicator:
https://jsbin.com/putuloledu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Load indicator slowing down</title>
</head>
<body>
<style>
.timeIndicator {
height: 5px;
width: 0;
background: #12b3c4;
animation-name: indicator-load;
animation-duration: 7s;
}
#keyframes indicator-load {
from {
width: 0;
}
to {
width: 200px;
}
}
</style>
<div class="timeIndicator"></div>
</body>
</html>
Which is supposed to show a self-growing rectangle indicator which grows evenly then stops at 200px width.
As can be seen, no easing is added anyhow.
Why then the animation slows down in the end and how to disable it making it even from start to end?


If i have understood you correctly this is what you may need just use the animation-timing-function:linear
here i have done it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Load indicator slowing down</title>
</head>
<body>
<style>
.timeIndicator {
height: 5px;
width: 0;
background: #12b3c4;
animation-name: indicator-load;
animation-duration: 7s;
animation-timing-function: linear;
}
#keyframes indicator-load {
from {
width: 0;
}
to {
width: 200px;
}
}
</style>
<div class="timeIndicator"></div>
</body>
</html>


Lookup the animation-timing-function animation property.

Related

Animating dialog ::backdrop in Firefox

I'm trying to make the ::backdrop pseudo-element of my dialog component using CSS. I've been able to achieve it on Edge and Chrome, but it seems like Firefox is not correctly applying the transition.
Does anyone know if that's not supported in FF, or my code is just wrong ? The modal itself respects the opacity transition, it's just the ::backdrop pseudo-element that comes up instantly.
This is the code I used for a quick proof of concept:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog PoC</title>
<style>
dialog {
opacity: 0;
transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
}
dialog.active {
opacity: 1;
}
dialog::backdrop {
background: black;
transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
opacity: 0;
}
dialog.active::backdrop {
opacity: 0.8;
}
</style>
</head>
<body>
<dialog>
<p>test nice</p>
<button id="closeBtn">close dialog</button>
</dialog>
<button id="openBtn">
open dialog
</button>
<script>
const dialog = document.querySelector('dialog')
const openBtn = document.querySelector('#openBtn')
const closeBtn = document.querySelector('#closeBtn')
openBtn.addEventListener('click', open)
closeBtn.addEventListener('click', close)
function open() {
dialog.showModal()
dialog.classList.add('active')
}
function close() {
dialog.close()
dialog.classList.remove('active')
}
</script>
</body>
</html>

Sprite animation with size more than 3MB not showing on Firefox

Recently I am facing some problem with my code in sprite animation in firefox.
My sprite image file is containing high quality graphics so the size of the image is more than 3MB. The same image with same code is working fine in Chrome.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body {
background-color: grey
}
.myDiv {
width: 650px;
height: 650px;
background: url(imagepath) top center;
animation: animatename 4s steps(120) infinite;
}
#keyframes animatename {
100% {
background-position: 0px -78000px;
}
}
</style>
<body>
<div class="myDiv"></div>
</body>
</html>

IE 11 Pre-Bootstrap Loading Screen For Angular2

Im having issue here. This works on Chrome but I cannot get any animations to work inside index.html for IE11. I get a static screen when it doesn't feel like working. Also in IE the message doesn't go away as it should. If I place the div inside Nothing shows at all in IE.
Does anyone have a good method of implementing a working animated screen inside index.html while bootstrap is loading? My css works some of the time in IE 11
My example that I have tried to use
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta charset="utf-8">
<title>My App Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="bacicon.ico">
<script type="text/javascript"></script>
<style>
.loading {
opacity: 0;
transition: opacity 0 ease-in-out 1s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.3);
z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, app-root is empty */
app-root:empty + .loading {
opacity: 1;
z-index: 100;
}
app-root:empty + .loading h1 {
position: absolute;
color: #eee;
top: 50%;
width:100%;
text-align: center;
transform: translate(0, -50%)
}
}
</style>
</head>
<body style="margin-top: 0px" >
<app-root>
</app-root>
<div class="loading">
<h1>Application is Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span></h1>
</div>
</html>
my css
.one {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
}
.two {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
}
.three {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
}

You need to use this open your polyfill.ts file and find this part of code :
/**
* Required to support Web Animations `#angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera.http://caniuse.com/#feat=web-animation **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
then remove comment before import 'web-animations-js';
and run this command npm install --save web-animations-js

With smoothState.js the link not lead to secondary page

I'm trying to make the smoothState.js plugin work. After clicking on a link that leads from index.html to secondary.html the animation produces a reverse but does not lead to secondary.html, remaining in fact on the same screen.
Here you will find the small example uploaded on codepen:
https://codepen.io/vizzale/project/editor/DPkyBr
here instead the code:
(index.html)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>smooth</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="cover" class="scene">
<div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:100vh;background-color:red;z-index:100;"></div>
link page
</section>
<section style="width:100vw;height:20vh;background-color:grey;"></section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smoothState.min.js"></script>
<script src="main.js"></script>
</body>
</html>
(secondary.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>smooth</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="cover" class="scene">
<div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:30vh;background-color:red;z-index:100;"></div>
link page
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smoothState.min.js"></script>
<script src="main.js"></script>
</body>
</html>
(JavaScript)
$(function() {
'use strict';
var $page = $('#cover'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
forms: 'form',
onStart: {
duration: 700, // Duration of our animation
render: function($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
(CSS)
* {
margin: 0;
padding: 0;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
color: #000;
background: #fff;
will-change: auto;
overflow-x: hidden;
}
a, a:link, a:hover, a:active, a:visited {
color: #000;
text-decoration: none;
}
#cover {
height: 100vh;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0.6;
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0.6;
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.scene .scene_element {
-webkit-animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.scene .-fadeindown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.scene.is-exiting .scene_element {
animation-direction: alternate-reverse;
}

Try with class="m-scene" on your container, I don't think this class can be changed.

I answer my own question to inform you guys that the problem does not seem to exist. It is sufficient to emulate the site on a live server (for example Atom Live Server) in order to correctly switch from one page to another.

CSS Image sprite

I have to replace image in the image frame from sprite sheet. But right now images are moving one by one. I have also attached my image in png format
.guy {
height: 190px;
width: 150px;
display: inline-block;
background-image: url(sprite_sheet.png);
}
#guy-1 {
-webkit-animation: run-x 10s infinite steps(100);
}
#-webkit-keyframes run-x {
from {
background-position-x: 0;
}
to {
background-position-y: -1950px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Keyframes check</title>
</head>
<body>
<div id="guy-1" class="guy"></div>
Original sprite
</body>