I looking for changing my background-color after a css rotateY when my div is hover
#-webkit-keyframes spin {
0%{
-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;
}
100%{
-webkit-transform: rotateY(180deg); -webkit-transform-origin: 0% 0% 5;
}
}
.hex:hover{
background:red;
-webkit-animation-name: spin;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
}
You should define that in you keyframe as your element is animating on hover so you can change the background color in the animation keyframe itself.
Try this:
#-webkit-keyframes spin {
0%{
-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;
}
100%{
-webkit-transform: rotateY(180deg); -webkit-transform-origin: 0% 0% 5;
background:red;
}
}
.hex:hover{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
}
.hexHovered {
background:red;
}
To retain the backgroud color at hover you can use this javascript code.
$(".hex").hover(
function () { $(this).addClass(".hexHovered")
});
You can make the animation "persist" in time using animation-fill-mode.
Asuming that you want the color to persist, but not the rotation, it is alittle bit more complicated; you need two animations so that you can make only one persistent.
#-webkit-keyframes spin {
0% { -webkit-transform: rotateY(0deg); }
100%{ -webkit-transform: rotateY(180deg); }
}
#-webkit-keyframes red {
0% { background: white; }
100% { background: red; }
}
.hex {
-webkit-animation-fill-mode: none, forwards;
-webkit-animation-name: spin, red;
-webkit-animation-iteration-count: 0;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s, 0.1s;
-webkit-animation-delay: 0s 1s;
-webkit-transform-origin: 0% 0% 5;
}
.hex:hover{
-webkit-animation-iteration-count: 1;
}
fiddle
Related
I've got the following animation. What I'm trying to do is when the animation reaches 50% I want it to stay there for 8 seconds.
If I change animation-duration: 3s; to 8s its is painfully slow.
And the transition-duration: 0.5s; doesn't seem to have any effect whatsoever.
I also tried adding animation-duration: 5s; to 50% {} but that doesn't do anything either.
Any suggestions on how to accomplish this?
html body div#size_cont div#dirt_specs {
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
transform: scale(1.4,1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
50% {
transform: scale(1.2,1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
This is what you need to do in your animation frames:
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
And simply set your animation-duration to 11s.
Explanation:
Since your original animation was 3 seconds long, and your requirement is to include a 8 second delay in the middle, the entire animation becomes 11 seconds.
This means that 1.5s goes into the first transition, 8s goes into the frozen segment, and 1.5s goes into the ending transition.
With that said, you need to get the % at which 1.5s is done out of 11s, which 1.5/11 = 0.136, hence the 13.6%.
The 86.4% is calculated from the reverse, 1 - 1.5/11 = 0.864, and this is needed because you want to maintain this animation state up (i.e., the frozen segment) until the last 1.5s of the animation.
See below for a working example:
div {
height: 150px;
width: 150px;
background: red;
-webkit-animation-name: dirt-specs1-anim;
-moz-animation-name: dirt-specs1-anim;
-o-animation-name: dirt-specs1-anim;
animation-name: dirt-specs1-anim;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 11s;
-moz-animation-duration: 11s;
-o-animation-duration: 11s;
animation-duration: 11s;
transform: scale(1.4, 1.4);
opacity: 0;
}
#-webkit-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-moz-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-o-keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#keyframes dirt-specs1-anim {
13.6% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
86.4% {
transform: scale(1.2, 1.2);
opacity: 0.5;
}
100% {
opacity: 0;
}
}
<div></div>
I tried a lot of things but nothing is working, idk if its a transform/translateX thing or not. I tried fading and it worked, but bouncing and the translateX is not working. I am currently using brakets software and I also tried sublime test 2. Please help.
Thanks.
/*animations*/
/******************
* Bounce in right *
*******************/
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slow{
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slower{
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slowest{
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
opacity:0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
opacity:0;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
}
.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight,
.rotateInDownLeft, .rotateDownUpRight, .rollIn{
opacity:0;
}
.lightSpeedInRight, .lightSpeedInLeft{
opacity:0;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
}
/***********
* bounceIn *
************/
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
#-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz- transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
}
/****************
* bounceInRight *
****************/
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
30%{
-webkit-transform: translateX(100px)
}
60% {
-webkit-transform: translateX(-10px);
}
80% {
-webkit-transform: translateX(5px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInRight {
0% {
opacity: 1;
-moz- transform: translateX(100px);
}
30%{
-moz- transform: translateX(100px)
}
60% {
-moz-transform: translateX(-10px);
}
80% {
-moz-transform: translateX(5px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
.bounceInRight.go {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
}
You need the unprefixed properties.
So for example:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s; // unprefixed
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-duration: 1s; // unprefixed
}
Thank you for your help. I have found the answer. My html code had something wrong which was:
style='display:inline, it works on chrome but for Firefox and Safari you should use this: style='display:inline-block.
Thanks again.
At first, check your syntax. I have noticed that there are some "broken" properties, written '-moz- transform'. It should be one word.
Second, could you provide some HTML or a jsfiddle?
(I could not post it as a comment - not enough reputation to do that.)
I am trying to animate a div to spin 360deg and move 400px to the right. How can I do this using CSS3? Do I need to use CSS3 keyframes?
<div id="spin"></div>
CSS:
#spin {
width:200px;
height:200px;
background-color:blue;
}
Yes, you need keyframes:
#spin {
width: 200px;
height: 200px;
background-color: blue;
-webkit-animation: myanimation 5s;
animation: myanimation 5s;
}
#-webkit-keyframes myanimation {
100% { margin-left: 400px; -webkit-transform: rotate(360deg); }
}
#keyframes myanimation {
100% { margin-left: 400px; transform: rotate(360deg); }
}
<div id="spin"></div>
add all the prefixes so it works on all modern browsers
-webkit-
-moz-
-ms-
-o-
Try this and adjust to your needs:
#spin {
position: absolute;
width: 200px;
height: 200px;
background: #00f;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-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);
left: 0px;
}
to {
transform: rotate(360deg);
left: 400px;
}
}
<div id="spin"></div>
So I want to rotate an icon in place using css.
I've tried this
.rotate-icon-gif {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg);
-webkit-transform-origin: 30px 22px;
}
to { -webkit-transform: rotate(360deg);
-webkit-transform-origin: 30px 22px;
}
}
#keyframes spin {
from {
transform:rotate(0deg);
transform-origin: 55% 50%;
}
to {
transform:rotate(360deg);
transform-origin: 55% 50%;
}
}
But it won't rotate in place - it rotates about some other center.
I've looked at the dimensions of the div that has this -
It's 60 x 30, with 15 padding on top. Hence, I've tried to make the transform-origin on 30px and 22px offsets.
It's still not working - how should I go about fixing this?
There are two methods of achieving this. Firstly, you can edit the image so the center lies directly on the axis of rotation.
First Method
Using cropped image. (No CSS added, deleted obsolete transition-origin)
See snippet:
.rotate-icon-gif {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to { -ms-transform: rotate(360deg); }
}
#-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);
}
}
<img src="http://i.imgur.com/tPLLoew.png" class="rotate-icon-gif">
Second Method
You can use transform-origin: x y; Here, you need to find the x and y coordinates of the axis using Paint or Photoshop like this: (You need to find the coordinates of intersection of black line)
See snippet :
.rotate-icon-gif {
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
transform-origin: 42px 35px;
}
to {
-ms-transform: rotate(360deg);
transform-origin: 42px 35px;
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
-moz-transform-origin: 42px 35px;
}
to {
-moz-transform: rotate(360deg);
-moz-transform-origin: 42px 35px;
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 42px 35px;
}
to {
-webkit-transform: rotate(360deg);
-webkit-transform-origin: 42px 35px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
transform-origin: 42px 35px;
}
to {
transform: rotate(360deg);
transform-origin: 42px 35px;
}
}
<img src="http://i.stack.imgur.com/GZ2CV.png" class="rotate-icon-gif">
NOTE - From my other answer : link
<img class="image" src="" alt="" width="120" height="120">
Cannot get this animated image to work, it is supposed to do a 360 degrees rotation.
I guess something's wrong with the CSS below, as it just stays still.
.image {
float: left;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin-top: -60px;
margin-left: -60px;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
} to {
-ms-transform: rotate(360deg);
}
}
#-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);
}
}
}
Here is a demo. The correct animation CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s 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);
}
}
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
Some notes on your code:
You've nested the keyframes inside the .image rule, and that's incorrect
float:left won't work on absolutely positioned elements
Have a look at caniuse: IE10 doesn't need the -ms- prefix
To achieve the 360 degree rotation, here is the Working Solution.
The HTML:
<img class="image" src="your-image.png">
The CSS:
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
You have to hover on the image and you will get the 360 degree rotation effect.
PS: Add a -webkit- extension for it to work on chrome and other webkit browers. You can check the updated fiddle for webkit HERE
I have a rotating image using the same thing as you:
.knoop1 img{
position:absolute;
width:114px;
height:114px;
top:400px;
margin:0 auto;
margin-left:-195px;
z-index:0;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.knoop1:hover img{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
try this easy
.btn-circle span {
top: 0;
position: absolute;
font-size: 18px;
text-align: center;
text-decoration: none;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.btn-circle span :hover {
color :silver;
}
/* rotate 360 key for refresh btn */
#-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); } }
<button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">↻</span></button>
if you want to flip image you can use it.
.image{
width: 100%;
-webkit-animation:spin 3s linear infinite;
-moz-animation:spin 3s linear infinite;
animation:spin 3s linear infinite;
}
#-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
#-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
#keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
The another method to rotate an object in the background using css3, check out the below css3 code here:
.floating-ball-model-3 > span {
animation-name: floating-ball-model-3;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: floating-ball-model-3;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: floating-ball-model-3;
-moz-animation-duration: 7s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: floating-ball-model-3;
-ms-animation-duration: 7s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: floating-ball-model-3;
-o-animation-duration: 7s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
#keyframes floating-ball-model-3 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Here this should help you
The below jsfiddle link will help you understand how to rotate a image.I used the same one to rotate the dial of a clock.
http://jsfiddle.net/xw89p/
var rotation = function (){
$("#image").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation();
Where:
• t: current time,
• b: begInnIng value,
• c: change In value,
• d: duration,
• x: unused
No easing (linear easing):
function(x, t, b, c, d) { return b+(t/d)*c ; }