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.
Related
I'm trying to connect the rotation of an object to the scroll.
Here's how cargo tells you to rotate an image: start by opening Code View while editing a page; then wrap the element you want to rotate with a div that has the class ‘rotate’.
<div class="rotate"></div>
and then add this to the CSS:
.rotate {
display: inline-block;
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Is there a way to connect this rotation to the page scrolling?
Good day,
I am trying to make a nice animation for a website.
It should be relatively simple. So I have drawn a hand and a BMW car key. Used a css code to make it swing and yes it works.
However it is responsive but not in the way I want it to be. I'd like the key to stay in place where it is. However it is moving just about anywhere depending on the screen size.
I could of course use screen size in css. But I don't want to use screen size. I want to be able to place the animation about anywhere where I'd like it to be.
However when resizing the key moves also anywhere where it would like to be :-/
Probably my approach is entirely wrong. But at this point this is what I'd could come up with. Maybe it is right. But I hope that someone could tell me where and how to correct my mistakes.
My HTML code (of course bootstrap and others are linked in the header)
#-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
}
}
#keyframes swinging {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg)
}
100% {
transform: rotate(10deg);
}
}
.swingimage {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
.key_hand {
/*
background-image: url('arm_hand.png');
background-repeat: no-repeat;
background-size: 100%; */
min-height: 900px;
}
.key_hand>.complete_arm {
position: relative;
width: 100%;
z-index: 2;
}
.key_hand>.bmw_key {
position: relative;
display: inline-block;
top: -390pt;
left: 7%;
z-index: 1;
width: 10%;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
<div class="container">
<div class="row">
<div class="col-md-12 key_hand">
<img src="arm_hand.png" class="complete_arm" />
<img src="complete_bmw_key.png" class="bmw_key" />
</div>
</div>
</div>
I have created the following pen. Hoping to shed some light on this case.
https://codepen.io/slalex/pen/GXxMmg
Removing min-height: 900px from .key_hand, and replacing pt by % for the top positioning of .key_hand > .bmw_key, it should be great. Here is the result
Hope it look like what you were waiting for, and bravo for your drawing !
I want to know how to set the resolution size on key frames, there is a bubble on my website which falls from the top to the bottom. I have set it properly for my screen size but I notice that when screen size changes the bubble go more down and create white space. It is definitely because i set it as top:-500px and top:500px so in every screen size it is taking 500px as fixed height. i want to set top:500px in such a way that whenever size changes it should take the screen height and should stop at bottom.
i tried some code but did not succeed can you please check:
.x4 {
left: 1025px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.3;
width:315px;
height:315px;
-webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
-moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
-o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
background-image: url(http://dubaiconfident.com/confi-logo/grey1-bubble.png);
}
#-webkit-keyframes moveclouds {
0% {
top: -500px;
}
100% {
top: 500px;
}
}
Use your moving element with position:fixed and top property with percents as units instead of pixels (so, start position 0%, end 100%-height of element) . Of course, parent of your element would have to be body for this.
If you would like to have more control over css keyframes, set them to be responsive, dynamically generate and re-generate them, use tool like jQuery.Keyframes
Try below codes and use media query to make that work properly on other screen resolution, you can use vh (viewport height) or % (percentage) to set landing or stopping of that bubble.
.x4 {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.3;
left:calc(100% - 75%);
-webkit-animation: moveclouds 5s linear forwards;
-moz-animation: moveclouds 5s;
-o-animation: moveclouds 5s;
background-image: url(http://dubaiconfident.com/confi-logo/grey1-bubble.png);
background-size:100% 100%;
background-repeat:no-repeat;
position:relative;
width:320px;
height:320px;
}
#-webkit-keyframes moveclouds {
0%{
top: -50vh;
}
100% {
top: 30vh;
}
}
#media screen and (max-width: 480px){
.x4 {
left:calc(100% - 70%);
width:200px;
height:200px;
}
#-webkit-keyframes moveclouds {
0%{
top: -50vh;
}
100% {
top: 30vh;
}
}
}
<div class="x4">
</div>
i have somewhat achieved infinite scrolling background using background position property.But the problem is i've given the value background-position:0 200px
in the keyframes,after moving downwards to 200px the background image restarts its movement from the beginning.I don't want that to happen,it should scroll infinitely without any hiccups. how to do it?
here is the code.
html:
<div id="cloud-scroll"></div>
css:
#cloud-scroll {
width: 275px;
height: 183px;
background: url(http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png);
background-size:cover;
-webkit-animation: backgroundScroll 20s linear infinite;
animation: backgroundScroll 20s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 200px;}
}
#keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 200px;}
}
You should use background-repeat and set your background image such that when it's repeated vertically ( or horizontally, if that's what you are doing ), it is seamless.
Your div is 183px tall, so you should use 183px in your animation.
#keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 183px;}
}
I'm loading an element that has the initial css values of :
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
transition: all 2s ease-in-out;
transform: scale(0,0);
}
I need to change to scale(1, 1) when the element loads in the page and see the transition. Anyone can help?
transition will apply the moment you load the page so that is not an ideal solution in your situation, what you will need is CSS #keyframes where you need to set scale(0,0) to the class and then scale(1,1) for 100% as keyframes will shoot after the page is completely loaded.
Demo (Refactored the code a bit and added animation-fill-mode to prevent the popup from scaling back to 0 so using rev 2)
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
-webkit-animation: bummer 2s;
animation: bummer 2s;
-webkit-transform: scale(0,0);
transform: scale(0,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; /* Add this so that your modal doesn't
close after the animation completes */
}
#-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1,1);
}
}
#keyframes bummer {
100% {
transform: scale(1,1);
}
}
Here as I explained before, am setting the initial scale of the element to 0,0 and than am animating it to 1,1 using keyframes. The time of the animation can be controlled by tweaking the 2s which is nothing but 2 Seconds.