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 😉
Related
Code below: CSS
`
.hamburger:hover > div:nth-child(1){
background-color: ghostwhite;
animation-name: top;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes top{
0%{transform: rotate(0deg)}
100%{transform: rotate(45deg)}
I am truly unsure the #keyframe is having no affect on the div.
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 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>
This is to add a spinning/loading icon for images as they load.
The existing code I'm using calls up an animated .gif image as a background image "behind" an image thumbnail, so the loading icon is visible until the thumbnail loads on top. But I want to replace the .gif with a higher quality .png and add CSS to make it rotate. It's a much cleaner look, but I don't know how or if I can add CSS style to background: url(img/loading.png)
Here's the original HTML code:
<div style="position: absolute; display: block; background: url(img/loading.png) no-repeat center center; top: 0px; left: 0px; width: 25%; height:25%;">
I want to add this CSS code to the .png to make it rotate:
.loading {
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
#-moz-keyframes spin { 100% {
-moz-transform:rotate(360deg);
}
}
#-webkit-keyframes spin { 100% {
-webkit-transform:rotate(360deg);
}
}
#keyframes spin { 100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
What's the best way to combine these to make my background .png image rotate?
You can animate the div with the background, you just need to add the loading class to it and with a separate class to add the other styles to it like the background url, width, height, position etc...
.load-style {
height: 64px;
width: 64px;
background: url(http://www.jasonkenison.com/uploads/blog/loading.png) no-repeat center center;
background-size: 100%;
position: absolute;
}
.loading {
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loading load-style"></div>
You didn't add the class which your animating to the HTML. In your CSS you have a class called "loading" but the HTML doesn't know what to animate. In your div before the style="" tag add class="loading" and it will work, other than that your CSS works.
I have a div I've animated on hover. However when I am not hovering the div won't disappear
This is what the entire thing looks like in action: http://jsfiddle.net/Vbxtc/
This is the html:
<nav>
<div id="controls">
<button id="playButton">Play</button>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<button id="vol" onclick="level()">Vol</button>
<button id="mute">Mute</button>
<button id="full" onclick="toggleFullScreen()">Full</button>
</div>
<div id="playlist" class="animated fadeInRight">
<div>cats</div>
<div>cats</div>
<div>cats</div>
</div>
</nav>
This is the CSS i've made:
#playlist{
position:absolute;
display:block;
border:1px solid red;
height: 82%;
width: 25%;
top: 20px;
right: 0px;
z-index: 2;
float:right;
padding: 0px;
margin: 0px;
color:white;
background-color:#999999;
opacity: 0;
}
#playlist:hover {
opacity: 1;
}
This is the animation im trying
.animated:hover {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
#-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
I noticed that when you time the mouse over exactly right (hover for about 1 second and move mouse up top), it DOES fade out nicely.
The other thing is, if you add the class fadeOutRight as follows:
<div id="playlist" class="animated fadeInRight fadeOutRight">
It fades out too quickly.
I know I didn't help much but the answer lies in the timing.
Also, if you had the fadeOutRight class on, for example, the sidebar, it works nicely!
<aside id="sidebar" class="fadeOutRight">
Perhaps, put the class of fadeOutRight on everything EXCEPT the fadeInRight div.
It's not a good idea to play with an element position in the hover state.
Even if you get to program it right (that is not easy), most of the time the user won't understand what's happening.
You can get flickering scenarios where, without the user moving the cursor, your div leaves the cursor position, canceling the hover, the div re-entering the cursor, the hover triggering , and so on.
I would recomend to trigger the hover on another div that covers the full area where the moving div will be.