I am facing an issue in css3 animation in IE11 only.
Here is link with issue (please open in ie11)
$(document).ready(function() {
$(".spinnerTinyBar").show();
$("#toggle").click(function() {
$(".spinnerTinyBar").toggle();
});
});
#keyframes tinybar-load1 {
0% {
box-shadow: 0 0 blue;
height: 20px;
}
40% {
box-shadow: 0 -15px blue;
height: 25px;
}
80% {
box-shadow: 0 0 blue;
height: 20px;
}
100% {
box-shadow: 0 0 blue;
height: 20px;
}
}
.spinnerTinyBar,
.spinnerTinyBar:before,
.spinnerTinyBar:after {
background: blue;
animation: tinybar-load1 1s infinite ease-in-out;
width: 2px;
height: 20px;
}
.spinnerTinyBar:before {
left: -5px;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinnerTinyBar {
font-size: 9px;
position: relative;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
transform: translateZ(0);
}
.spinnerTinyBar:after {
left: 5px;
}
.spinnerTinyBar:before,
.spinnerTinyBar:after {
position: absolute;
top: 0;
content: "";
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="toggle" value="Toggle" />
<div class="spinnerTinyBar"></div>
JSFiddle
Issue:
For first time, the animation is working good. When I toggle by clicking on toggle button the animation is not happening for 1st and last bar. This is working fine in chrome and in all mobile devices.
Let me know if anybody figured it out and do the needful
It's a weird one this but here's a fix:
Change your html to this:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".spinnerTinyBar").show();
$("#toggle").click(function(){
$(".divClass").toggleClass('spinnerTinyBar');
});
});
</script>
<input type="button" id="toggle" value="Toggle"/>
<div class="divClass spinnerTinyBar"></div>
</body>
Instead of hiding the element we simply change the class on it to show the animation, or not
Here's an updated fiddle working in ie11
Try this little hack for your IE
#media screen and (min-width: 0\0) {
.your-animation-parent {
transform: translate3d(0, 0, 0);
}
}
Related
i want to make a 3d scene made out of squares and then move around without addons
then i started by watching a video about html and 3d graphics, i made this and i have been stuck for 2 days trying to animate the scene, i have tried with javascript to detect the mouse or keyboard but im unable to make it work, im new to css, html and java
i use visual studio code
<!DOCTYPE html>
<html>
<head>
<title>engine 1A</title>
<style>
html, body {margin: 0; padding: 0;}
body {background: black; overflow: hidden;}
#scene
{
perspective: 800px;
transition-duration: 5s;
transition-delay: 2s;
transition-timing-function: linear;
transition-property: width;
}
#keyframes roll {
from {
transform:rotateX(0) rotateY(0);
}
to {
transform:rotateX(360) rotateY(360);
}
}
#mainD
{
width: 500px;
height: 500px;
margin: 200px auto;
}
#boxD
{
width: 500px;
height: 500px;
}
#boxD div
{
position: absolute;
border: 1px solid white;
width: 500px;
height: 500px;
transform-style: preserve-3d;
}
#ZB
{
transform: translateZ(250px) rotateY(180deg)
}
#ZP
{
transform: translateZ(-250px)
}
#XB
{
transform: translateX(-250px) rotateY(90deg)
}
#XP
{
transform: translateX(250px) rotateY(-90deg)
}
#YB
{
transform: translateY(-250px) rotateX(90deg)
}
#YP
{
transform: translateY(250px) rotateX(-90deg)
}
</style>
</head>
<body>
<div id="scene">
<div id="mainD">
<div id="boxD">
<div id="ZB"></div>
<div id="ZP"></div>
<div id="XP"></div>
<div id="XB"></div>
<div id="YP"></div>
<div id="YB"></div>
</div>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
With using html/css, How can i expose a moving image after selecting a radio button.
I have tried with the following code, i am able move the text but it always present,i want it to expose after i make a selection.
for example, if i make a selection of phone radio button, small phone's moving image should pops up from left of screen.
#rdiv {
margin: 50px;
}
#fradio {
margin: 15px 10px 20px 180px;
font-family: fantasy;
color: chartreuse;
}
#sradio {
margin: 5px 10px 20px 180px;
font-family: fantasy;
color: chartreuse;
}
#keyframes color-me-in {
0% {
background: orange;
}
/* Adding a step in the middle */
50% {
background: blue;
}
100% {
background: black;
}
}
#fsale {
vertical-align: middle;
color: aqua;
position: relative;
top: 70%;
font-size: 3.5em;
-webkit-animation-name: example;
/* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s;
/* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#-webkit-keyframes example {
0% {
color: red;
left: 0px;
top: 0px;
}
25% {
color: yellow;
top: 200px;
}
50% {
color: blue;
top: 100px;
left: 200px;
}
75% {
color: green;
left: 400px;
top: 200px;
}
100% {
color: red;
left: 600px;
top: 100px;
}
}
#image1 {
background-image: url(https://hikaricosmetics.com/wp-content/uploads/2014/07/Cabernet-lips-565x565.png);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<div id="rdiv">
<label id="fradio">
<input type="radio" name="editList" value="never" />phone
</label>
<div id="image1"></div>
<label id="sradio">
<input type="radio" name="editList" value="costChange" />headphones
</label>
</div>
<p id="fsale">This should be image unpon selection of radio button</p>
</body>
</html>
Use another #keyframe to define animation and trigger that by using #fradio input:checked{} and #sradio input:checked{}
if you use less or sass just need to input keyframes codes inside the #fradio input[type="radio"]:checked
#fradio input[type="radio"]:checked {
#keyframes color-me-in {
0% {
background: orange;
}
/* Adding a step in the middle */
50% {
background: blue;
}
100% {
background: black;
}
}
When an elements display goes from none to some other value its animation(if it has any) activates.
Does anyone know how to prevent this?
Also it would be nice to understand why this happens. Is because the DOM is being reflown?
Here is an example of what I mean for reference:
https://jsfiddle.net/darlyp/2p2q767r/
HTML
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>
CSS
.red-square{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare{
0%{
margin-left: 0px;
}
50%{
margin-left: 400px;
}
100%{
margin-left: 0px;
}
}
JS
document.getElementById('btn').addEventListener("click", function() {
var currentDisplay = document.querySelector('.red-square').style.display;
if (currentDisplay === 'none') {
document.querySelector('.red-square').style.display = 'inline-block';
} else {
document.querySelector('.red-square').style.display = 'none';
}
})
https://jsfiddle.net/darlyp/2p2q767r/
When you display it, you could set the animation-play-state to paused.
JSfiddle
document.getElementById('btn').addEventListener("click", function() {
var currentDisplay = document.querySelector('.red-square').style.display;
if (currentDisplay === 'none') {
document.querySelector('.red-square').style.display = 'inline-block';
document.querySelector('.red-square').style.animationPlayState = 'paused';
} else {
document.querySelector('.red-square').style.display = 'none';
}
})
.red-square{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare{
0%{
margin-left: 0px;
}
50%{
margin-left: 400px;
}
100%{
margin-left: 0px;
}
}
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>
Another way would be to toggle opacity instead, and change the height to 0 when it's hidden so it doesn't occupy any space on the page.
document.getElementById('btn').addEventListener("click", function() {
document.querySelector('.red-square').classList.toggle('hide');
})
.red-square {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare {
0% {
margin-left: 0px;
}
50% {
margin-left: 400px;
}
100% {
margin-left: 0px;
}
}
.hide {
opacity: 0;
height: 0;
}
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>
I have created a simple loader with css. It works fine in chrome but nor working in firefox.
https://jsfiddle.net/sunilmadaan07/4dcaLegc/
Code is as below:
HTML:
<div class='container'>
<div class='loader'>
<div class='loader--text'></div>
</div>
</div>
Content animation not working in most of all browser. You can do following using plugins.
$("#randomArea").Loadingdotdotdot({
"speed": 400,
"maxDots": 5,
"word": "Loading"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/Loadingdotdotdot/js/jquery.loadingdotdotdot.js"></script>
<div id="randomArea" style="position: relative;">done!</div>
Reference Link
Hey you can achieve the effect using plain JS but i have used jQuery..
jQUERY
// Simpler, does exactly the same thing:
var i=1;
var txt="Loading";
function go () {
console.log(i);
$('.loader--text').text(txt);
i++;
txt+=".";
if(i==5)
{
txt="Loading";
i=1;
}
setTimeout(go,1000);
}
go();
JSFIDDLE Link:
https://jsfiddle.net/4dcaLegc/5/
The problem is animation with :after pseudo is not supporting in Firefox, thats why I change some of your code a litter from content to width on parent element.
Check below snippet:
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader {
height: 20px;
width: 80px;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader-text {
position: absolute;
top: 500%;
left: 0;
right: 0;
width:64px;
overflow:hidden;
animation: loadertext 3s infinite;
-moz-animation:loadertext 3s infinite;
}
#-moz-keyframes loadertext {
0% {
width:64px;
}
35% {
width:68px;
}
60% {
width:72px;
}
100% {
width:75px;
}
}
#keyframes loadertext {
0% {
width:64px;
}
35% {
width:68px;
}
60% {
width:72px;
}
100% {
width:75px;
}
}
.loader-text:after {
content: "Loading...";
font-weight: bold;
display:block;
}
<div class='container'>
<div class='loader'>
<div class='loader-text'></div>
</div>
</div>
//Here is my HTML
What i need here is that on complete load of the progress bar it should redirect to another page.
any ways for that?!!!!
.text-center {
text-align: center;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
-webkit-animation-duration: 3s;
-webkit-animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-webkit-keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="container">
<h2 class="text-center">Loading</h2>
<div class="progress">
<div class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
help me out!!
And i don't have any java script here.
i would be more happy if i can do it without java script.
so please help me out with it.
UPDATE
found that java script animation end may help out.
Simply use this trick highlighted by David Walsh. He did it for transitionend, but we can swap it out for animationend instead.
His trick is to loop through the list of all vendor-prefixed and native animationend events, and check if the browser supports any of them. He then attaches the recognized animationend handler to the element of interest.
When the animationend event is fired, we simply redirect to the URL of interest using window.location.replace(), as mentioned before.
I have modified it so it would work for your scenario:
$(function() {
// Check with animationend event is supported by browser
function whichAnimationEvent(){
var t;
var el = document.createElement('fakeelement');
var animations = {
'animation':'animationend',
'OAnimation':'oAnimationEnd',
'MozAnimation':'animationend',
'WebkitAnimation':'webkitAnimationEnd'
}
for(t in animations){
if( el.style[t] !== undefined ){
return animations[t];
}
}
}
// Listen for animation
var animationEvent = whichAnimationEvent(),
progress = document.getElementsByClassName('progress-bar')[0];
animationEvent && progress.addEventListener(animationEvent, function() {
// Alert (to demonstrate the code works)
alert('Animation complete! This is the callback, no library needed!');
// Redirect script
window.location.replace('/path/to/url');
});
});
See fiddle here: http://jsfiddle.net/teddyrised/9w7pntmt/3/
ok., i found the solution completely.
if anyone have any issue with this please report.
function whichAnimationEvent() {
var t;
var el = document.createElement('fakeelement');
var animations = {
'animation': 'animationend',
'OAnimation': 'oAnimationEnd',
'MozAnimation': 'animationend',
'WebkitAnimation': 'webkitAnimationEnd'
};
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
}
function oload() {
var animationEvent = whichAnimationEvent(),
progress = document.getElementsByClassName('progress-bar')[0];
animationEvent && progress.addEventListener(animationEvent, function() {
window.location.replace("http://alokraj68.in");
});
}
// Listen for animation
html,
body {
height: 100%;
}
body {
background-color: #f5f7f9;
color: #6c6c6c;
font: 300 1em/1.5em"Helvetica Neue", sans-serif;
margin: 0;
position: relative;
}
h1 {
font-size: 2.25em;
font-weight: 100;
line-height: 1.2em;
margin: 0 0 1.5em;
}
.text-center {
text-align: center;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
-webkit-animation-duration: 3s;
-webkit-animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-webkit-keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<html>
<head>
<meta charset="UTF-8">
<title>alokraj68.in--Loading!!</title>
<link rel="stylesheet" href="css/loading.css">
<script src="js/script.js"></script>
</head>
<body onload="oload()">
<div class="container">
<h1 class="text-center">alokraj68.in</h1>
<h2 class="text-center">Loading</h2>
<div class="progress">
<div id="pb" class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
</body>
</html>
Try this coding.
if anyone finds any issues, please tell me.