I have a image that is being spun using animation. The image works perfectly on desktop and some mobile devices. However, on certain devices the image does not show. I made sure the HTML validated and the CSS was working properly. Could there be any other reason for this?
#test {
max-width: 100%;
max-height: 100%;
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#-moz-keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#-o-keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
<div class="main">
<img src="http://placehold.it/100x100" alt="TESTING" id="test">
</div>
Related
Try using this JSFiddle in Chrome and in Firefox.
Here's the code:
(HTML)
<div class="slide-down">
<h1>Hello!</h1>
</div>
(CSS)
.slide-down {
font-size: 3em;
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-moz-animation-name: slideDown;
-webkit-animation-name: slideDown;
}
#-moz-keyframes slideDown {
0% {
-moz-transform:translateY(-300px);
}
100% {
-moz-transform:translateY(0px);
}
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-300px);
}
100% {
-webkit-transform: translateY(0px);
}
}
My issue is that it works in Chrome but only works in Firefox when the starting coordinates (at the "0%" point of the animation) of the animated div are within the viewport. Otherwise, it can completely skip the animation. Try changing the translateY() parameter to something more conservative, like -50px, and it will work.
Is there a workaround for this? It would be nice to be able to bring something in from outside the screen without having to write a script to figure out what its initial y-coordinate should be.
I would consider animating the margin instead:
.slide-down {
font-size: 3em;
animation:slideDown 3s forwards;
}
#keyframes slideDown {
0% {
margin-top:-300px;
}
100% {
margin-top:0;
}
}
<div class="slide-down">
<h1>Hello!</h1>
</div>
I decided to make something that would spin repeatedly on a gradient background. I've got the "spin repeatedly" part right, but the gradient background isn't working.
HTML:
<img src="http://i.imgur.com/gQioYac.png">
<img src="http://i.imgur.com/gQioYac.png">
<img src="http://i.imgur.com/gQioYac.png">
<img src="http://i.imgur.com/gQioYac.png">
<img src="http://i.imgur.com/gQioYac.png">
<div id="css-gradient"></div>
CSS:
img {
animation-name: rotate;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: reverse;
animation-timing-function: ease-in;
animation-play-state: running;
float: left
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
#css-gradient {
background: linear-gradient(blue, white)
height: 100px;
width: 100px;
}
}
I've also posted it as a fiddle so you can see it in action:
https://jsfiddle.net/ywtfsju1/
You had some mistakes with your brackets, here the working fiddle: https://jsfiddle.net/ywtfsju1/1/
#css-gradient { was in #keyframes rotate {, not it's after it.
You should use code indent to avoid such mistakes 😉
I found this animation in codepen.io. Everything is working fine but when I test it in firefox the animation is not working.
The code already has browser prefixes so I do not know what is not working in FF.
<!DOCTYPE html>
<html>
<head>
<style>
.loading {
margin-left:auto;
margin-right:auto;
display:table;
border-width:30px;
border-radius:50%;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
.style-1 {
border-style:solid;
border-color:#001e60 transparent
}
.style-2 {
border-style:double;
border-color:#001e60 transparent;
}
.style-3 {
border-style:double;
border-color:#001e60 #fff #fff;
}
#-webkit-keyframes spin {
100% {
-webkit-transform:rotate(359deg);
}
}
#-moz-keyframes spin {
100% {
-moz-transform:rotate(359deg);
}
}
#-o-keyframes spin {
100% {
-moz-transform:rotate(359deg);
}
}
#keyframes spin {
100% {
transform:rotate(359deg);
}
}
</style>
</head>
<body>
<div style="display: block;" class="loading-container">
<span id="loadingIndicator" class="loading style-3"></span>
</div>
</body>
</html>
The problem is having .loading use display: table; without actually specifying a width or height. Using a table like that to imply size is a bit hacky. Chrome is interpreting those dimensions differently than Firefox. It'd be best to explicitly give it a size using css. Try changing it to a block with a width and height like this:
.loading {
margin-left:auto;
margin-right:auto;
display:block;
border-width:30px;
border-radius:50%;
height: 5px;
width: 5px;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
BIN: https://jsbin.com/nedanayopu/edit?html,output
Can somebody tell me why blink effect is not working chrome browser
<p class="blink">at least it's not Comic Sans</p>
<style>
.blink {
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#keyframes blink {
80% {
visibility: hidden;
}
}
</style>
And also I require this to work on every iOS and Android devices. Please suggest.
You are missing -webkit prefixes for animation and keyframes.
First of all, for reference, please do try out this:Tryit from W3School
Especially in chrome, things such as animation, transformation requires -webkit prefix. After reading my reference, you should be able to do it yourself.
But here is the solution anyway. See result here: JSFiddle
.blink {
-webkit-animation-duration: 1s;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(2, start);
animation-duration: 1s;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: steps(2, start);
}
#-webkit-keyframes blink {
80% {
visibility: hidden;
}
}
#keyframes blink {
80% {
visibility: hidden;
}
}
You now can go on and read more about prefix (simply search about it google)
When I insert an image into my HTML it gets positioned in the lower left corner for some reason. Even if I set position to center; it stays in that strange position. What could be causing this?
My code:
<!DOCTYPE HTML>
<html>
<header>
<title>Animation Verkefni</title>
<link type="text/css" href="stylesheet2.css" rel="stylesheet"/>
</header>
<body>
<div class="doge1">
<p>
Transitions in CSS are applied to an element and specify that when a property changes it should do so gradually over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.
</p>
</div>
<div class="doge2">
<img src="spengbab.jpg">
</div>
</body>
</html>
css:
body {
background-color:gray;
}
p {
font-size:50px;
margin-left:500px;
margin-right:500px;
text-align:center;
margin-top:250px;
font-family:impact;
}
#keyframes myfirst
{
0% {opacity:1;}
25% {opacity:2;}
50% {opacity:3;}
75% {opacity:4;}
100% {opacity:10;}
}
#-webkit-keyframes myfirst /* Safari og Chrome */
{
0% {opacity:1;}
25% {opacity:2;}
50% {opacity:3;}
75% {opacity:4;}
100% {opacity:10;}
}
.doge2 {
position:fixed center;
top:20px;
}
.doge1:hover
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari og Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Thanks!
Try using position:fixed; & text-align:center;
Like this:
.doge2 {
position:fixed;
top:20px;
width:100%;
text-align:center;
}
Try with
vertical-align:middle;
to keep image at center position.