I am trying to animate some clouds on my website so they move diagonally across the page (starting off screen on the top left, ending off screen on the bottom right).
So far I have them moving from left to right but i'm not sure how to use translate3D to get them to move in this direction. Here's a site that shows what I want to achieve: http://futurewatercity.com/ (you have to click through to their map using the arrow)
and here is my code:
<div class="sky">
<div class="cloud cloud01"></div>
<div class="cloud cloud02"></div>
</div>
.cloud {
width: 512px;
height: 512px;
transform: scale(0.25);
position: absolute;
background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds01.png) 0 0 no-repeat;
}
.cloud01 {
top: 10px;
z-index: 100;
transform: scale(0.35);
animation: drift 25s linear infinite;
}
.cloud02 {
top: 10px;
z-index: 100;
transform: scale(0.5);
animation: drift 35s linear infinite;
}
#keyframes drift {
from {transform: translateX(-355px);}
to {transform: translateX(1350px);}
}
Related
I want to display an animated loading icon when the user have submitted a search.
SEQUENCE OF EVENTS I'M LOOKING FOR:
USER SUBMITTED A SEARCH
MAKE LOADING ICON VISIBLE
MAKE LOADING ICON INVISIBLE ONCE THE SEARCH IS COMPLETED
The issue I'm facing is mostly css.
Firstly, the loading icon seems to be behind the form element.
Secondly, I cannot increase the size of the div (searchEngineForm) to have the same size as the form.
Lastly, I cannot set div (searchEngineForm) width to 100%. It goes outside of the form.
Here is my code:
HTML:
<form action="setJobFields" method="POST">
<div id="searchEngineForm" style="display: none;">
<div class="loader">
</div>
</div>
...
</form>
CSS:
#searchEngineForm{
position: absolute;
/* width: 100%; */
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
To set an html element above others, you could set its Z-index to a higher number than what’s around it.
For example, say you’re wanting to display your loading symbol in front of the rest of the page. You could contain the whole page in a single div, for the sake argument we give it a class of “page”, we can set it as:
.page{ z-index: -1 ;}
And the loader as
.loader{ z-index: 1; }
Then, to position it where you want, you can set the position to absolute and move it around with the top and left properties, such as
.loader{ z-index:1; position: absolute; top: 50%; left: 50%; }
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 have a simple CSS animation at the moment where the animation moves the image from top left to bottom right of my banner canvas (300x250) but 50% through i need to start to move towards bottom left and then 100% finish off with moving it back towards the bottom right but as new to css animations not sure how to do this. Does anyone know if this is possible?
Done a little diagram here:
And example:
.train-container {
position: relative;
}
.train {
position: absolute;
top: -350px;
left: -250px;
}
#keyframes moveTrain {
0% {
transform: translate(-185px,-159px);
}
100% {
transform: translate(300px,250px);
}
}
.train-container {
animation-duration: 30s;
animation-fill-mode: forwards;
backface-visibility: hidden;
animation-name: moveTrain;
position: absolute;
}
.train-container {
.train {
transform: scale(0.65);
}
}
When your animation is working so far, all you need to do is to add more keyframes.
Right now you have the keyframes for 0% and 100%. Add 2 more frames with 33% and 66% in between and set their location.
#keyframes moveTrain {
0% {
transform: translate(-185px,-159px);
}
33% {
transform: translate(VALUE, VALUE);
}
66% {
transform: translate(VALUE, VALUE);
}
100% {
transform: translate(300px,250px);
}
}
Just specify the wanted location values in the added keyframes.
You can also use other values for the keyframes than 33% and 66%, and you can also add even more
I encounter a problem showing loading a CSS animation while doing a heavy JavaScript operation, so wondering if CSS animation is taking more resources than showing a simple loading GIF image, I made the following tests.
1 created page with loading CSS
Created page with loading CSS animation
Created page with loading GIF image
Compared their resources using Chrome task manager
Here are the results:
It looks like CSS animation is using more CPU, and more memory
so basically I want to consult about using CSS animations. Isn't that too heavy? Should I avoid using it in loading cases?
Loading example using CSS animation
Loading example using GIF image
Here is the code for loading with CSS animation
CSS
/* Beautiful loading screen */
#loadingWrap{
width: 100%;
height: 100%;
top: 0px;
z-index: 250;
background-color: rgba(255, 255, 255, 0.46);
}
.glyphicon.spin {
font-size: 36px;
-webkit-animation: spin 1.822s infinite linear;
-moz-animation: spin 1.822s infinite linear;
-o-animation: spin 1.822s infinite linear;
animation: spin 1.822s infinite linear;
-webkit-transform-origin: 50% 58%;
transform-origin:50% 58%;
-ms-transform-origin:50% 58%; /* IE 9 */
line-height: 0px;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
#keyframes spin {
from { transform: rotate(0deg); }
to {transform: rotate(360deg); }
}
#loadingIcon {
z-index: 10;
position: absolute;
right: 20px;
bottom: 20px;
line-height: 0px;
}
HTML
<div id="loadingWrap">
<div id="loadingIcon">
<i class="glyphicon glyphicon glyphicon-cog spin">Q</i>
</div>
</div>
Here is the code for loading using a simple GIF image
CSS
#loadingWrap{
width: 100%;
height: 100%;
top: 0px;
z-index: 250;
background-color: rgba(255, 255, 255, 0.46);
}
#loadingIcon {
z-index: 10;
position: absolute;
right: 20px;
bottom: 20px;
line-height: 0px;
background: url(../1-0.gif) no-repeat center center;
width: 20px;
height: 20px;
}
HTML
<div id="loadingWrap">
<div id="loadingIcon">
</div>
</div>
Gif images:
Positives
Performance (small file size)
Ease of use & setup
Older browser support
Negatives:
Don't scale smoothly (retina displays, larger images)
Image quality(256 color limit)
Difficult adaptation & change (need specialized software like Photoshop)
Css animations:
Positives:
Easily editable through CSS
High quality images and rich colors possible
Smooth scaling (retina ready images & svgs)
Negatives:
Performance
CSS animations not supported by IE 7,8,9
More complex to setup
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.