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?
Related
I've used the following CSS taken from here.
:host {
animation: rotation 2s infinite linear;
border: 10px solid yellow;
}
#keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
I don't get to see any rotation, although I can see the border, so I know that I target the correct element. I don't think it's required to have an IMG (and mine is a custom thingy in Angular). It works on the IMG and also on a DIV. Not sure how to diagnose it further as rotations/animations aren't my strongest suite.
One approach is to put the custom component in a DIV and rotate that. However, it does rotate around the middle of the screen (wiiiide circle) instead of spinning around itself.
<div id="loading">
<my-icon-globe></my-icon-globe>
</div>
#loading { animation: rotation 2s infinite linear; }
#keyframes rotation {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
You can adjust transform-origin of the DIV if you attempt the second approach.
As the question says I'd like to rotate an icon 360 degrees one way the rotate back the other repeatedly. Going one direction is easy enough what I don't understand is stopping and going the other direction.
#loading {
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<i id="loading" class="material-icons">autorenew</i>
I have tried creating another rotation going the other direction but it doesn't seem to apply.
#-webkit-keyframes rotationBackwards {
from {
-webkit-transform: rotate(359deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
Transformation doesn't apply on inline elements. You have to make your element a block-level element instead (See Transformable Elements on the specifications - If you include the Martial Icons, this will be set by default).
The Animation itself can simply be done with a rotation to 360 degrees for the first half (50%) and a rotation back to 0 degrees for the second half. Mind that the duration of the animation splits into both directions (given your 2s animation, every direction will take 1s).
#loading {
display: inline-block;
animation: rotation 2s infinite linear;
}
#keyframes rotation {
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>
Here is another idea by simply using alternate value of animation-direction and by keeping your initial animation:
#loading {
animation: rotation 2s infinite linear alternate;
}
#keyframes rotation {
/*from {
transform: rotate(0deg); no needed to define this
}*/
to {
transform: rotate(360deg);
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>
I'm working with HTML5 banner having a lot of CSS3 animation. To make reusable keyframe animation I'm using multiple animation on single element. It's working perfectly except safari.
CSS:
.text1 {
-webkit-animation: fadeOutRight 1s 3s forwards;
animation: fadeOutRight 1s 3s forwards;
}
.text2 {
-webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
}
.text3 {
-webkit-animation: fadeInLeft 1s 8s both;
animation: fadeInLeft 1s 8s both;
}
/* fadeInLeft */
#-webkit-keyframes fadeInLeft {
0% { -webkit-transform: translateX(-100px); opacity: 0; }
100% { -webkit-transform: translateX(0px); opacity: 1; }
}
#keyframes fadeInLeft {
0% { transform: translateX(-100px); opacity: 0; }
100% { transform: translateX(0px); opacity: 1; }
}
/* fadeOutRight */
#-webkit-keyframes fadeOutRight {
0% { -webkit-transform: translateX(0px); opacity: 1; }
100% { -webkit-transform: translateX(100px); opacity: 0; }
}
#keyframes fadeOutRight {
0% { transform: translateX(0px); opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}
jsfiddle link
Workable solutions:
Wrap the element with another/more element & add single animation to each element. This solution needs extra styling for wrapper element.
Merge multiple animation into one & this solution increase the complexity of the keyframes rule and it's not easily maintainable for complex animation.
According to accepted answer of another stackOverflow post –
You cannot animate same attribute more than once, on a same element, the last one will overwrite other.
It’s only true for safari in my case & first animation is only running not
second one. If I don’t animate same property on multiple animation
then it’s also fine for safari(jsfiddle). This one is not
suitable for me because I will need to animate same property in
multiple animations.
Note:
Although I'm using multiple animation on same element but I'm not animating at same time, there is delay between each animation.
Question:
Is it possible to use multiple CSS3 animation on same element regardless of animating property?
For some reason, Safari does not read trough the shorthand method for describing the animation, for example:
animation: test 1s 2s 3 alternate backwards
It needs to be described more detailed with its separate properties listed:
.class{
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
I got an image
<div class="spin-image">
<img src="images/color-wheel.png" alt="" />
</div>
and its corresponding css
.spin-image {
-webkit-animation:spin 10s linear infinite;
-moz-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
-webkit-transition-duration: 2s; /* Safari */
transition-duration: 2s;
}
.spin-image:hover {
-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 I'm trying to do is to accelerate the image spinning on hover. The animation works, but the transition does not.
If you realise, this is like the animation and the hover animation are two different ones, and they reset to their virtual state of rotation in case they were running all the time you were or weren't hovering.
Unfortunatly, it is not posible to animate the transition between 2 different animation-durations.
Yet if you really really need a solution for this, you could program the animation using transition and a javascript interval that resets the positions for every turn. This way yo can reset the property and the duration of the transition at any time with javascript.
I made you a pen: http://codepen.io/vandervals/pen/aONmVL
This is the css you need:
.spin-image img{
transition: transform 2s linear;
transform: rotate(0deg);
}
.spin-image img.hover{
transition: transform 1s linear;
}
And the JS:
var vel = 2000;
var degs = 0;
var cat = document.querySelector("img");
function repeat(){
if(vel == 1000){
cat.classList.add("hover");
console.log("hover")
}else{
cat.classList.remove("hover");
console.log("nohover")
}
degs+=360;
cat.style.transform = "rotate("+degs+"deg)";
setTimeout(repeat, vel);
}
repeat();
document.querySelector("img").addEventListener("mouseenter",hovering);
function hovering(){
vel = 1000;
}
document.querySelector("img").addEventListener("mouseleave",nohovering);
function nohovering(){
vel = 2000;
}
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.