So I am working on a SVG animation of a simple stopwatch using CSS transform: rotate() and it works perfectly on webkit browsers like chrome, and safari. However on Firefox it behaves quite differently where the second hand which I am trying to animate flies off it's axis. I created a codepen of it here.
#stopwatch {
position: relative;
}
.stopwatch-st0{fill:#E65E39;}
.stopwatch-st1{fill-rule:evenodd;clip-rule:evenodd;fill:#34312D;}
.stopwatch-st2{fill:#34312D;}
#stopwatch:hover #second-hand {
-webkit-animation: secondAnimate 1s ease;
animation: secondAnimate1 1s ease;
}
#second-hand {
--webkit-transform-origin: 12% 78%;
transform-origin: 12% 78%;
/*transform: rotate(-55deg);*/
-webkit-animation: secondAnimate 1s ease;
animation: secondAnimate 1s ease;
}
#-webkit-keyframes secondAnimate {
0% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes secondAnimate1 {
0% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
http://codepen.io/timherbert/pen/bBXaMW
Related
I am trying to make an animation, where few elements would appear bigger than they are and shrink back to normal.
Here's what I've got:
One of the elements
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
transform: rotate(82deg);
}
And keyframe
#keyframes ani {
0% {
transform: scale(1.5);
-webkit-transform: scale(1.5);
}
100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
HTML
<div id="wrapper">
<img id="element" src="img.svg">
<img id="element2" src="img2.svg">
</div>
The problem is that whenever the animation starts, elements appear as they never been rotated and rotates only after animation ends. How could I force them to rotate before the animation?
you should combine the rotation code with transform in animation as well. basically rotate and scale both are the values of transform property, so if you only use scale in the animation, it will override rotate value and will only show the scale.
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
transform: rotate(82deg);
}
#keyframes ani {
0% {
transform: scale(1.5) rotate(82deg);
-webkit-transform: scale(1.5) rotate(82deg);
}
100% {
transform: scale(1.0) rotate(82deg);
-webkit-transform: scale(1.0) rotate(82deg);
}
}
<div id="wrapper">
<img id="element" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<img id="element2" src="http://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg">
</div>
You need to move your rotate into the keyframes:
#element {
position: absolute;
width: 38%;
height: auto;
animation: ani 250ms ease-in;
-webkit-animation: ani 250ms ease-in;
}
#keyframes ani {
0% {
transform: scale(1.5) rotate(0deg);
-webkit-transform: scale(1.5) rotate(0deg);
}
100% {
transform: scale(1.0) rotate(82deg);
-webkit-transform: scale(1.0) rotate(82deg);
}
}
I am trying to auto rotate an image after ever 5 seconds from css. My code is working but only on hover but I want on both hover and without hover. So far I have done is given below.
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
<div class="circle-border">
<img class="img-circle" src="images/web.jpg" alt="service 1">
</div>
Thanks in advance
You need an animation not a transtion.
CSS Animations # MDN
This animation is 6s long but the rotation only takes place in the last 1/6th of the duration....which gives us a 1s animation every 5 seconds.
div {
width: 100px;
height: 100px;
background: #663399;
margin: 1em auto;
-webkit-animation-name: spinner;
animation-name: spinner;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div></div>
I used Javascrit to do it however it's still can made with css alone
but maybe usefull, hope it can help
var circle = document.getElementById("test");
if (circle.classList.contains("move")) {
setInterval(function () {
"use strict";
circle.classList.add("move");
}, 2000);
setInterval(function () {
"use strict";
circle.classList.remove("move");
}, 5000);
}
.circle-border {
width:100px;
height:100px;
background-color:#F00;
}
.move {
animation: circle .9s ease 1;
}
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
#keyframes circle {
0% {transform:rotate(0)}
100% { transform:rotate(720deg)}
}
<div id="test" class="circle-border move">
</div>
I'm attempting to make a welcome page that, once you click on it, will fall by a CSS transition.
I can't figure out how to make the page fall, I can only make the button fall when the page loads.
here's what I have:
<style>
pt-page-rotateFall {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
animation: rotateFall 1s both ease-in;}
a {
color:black;
text-align:center;
-moz-transition:all 1s ease; -webkit-transition:all 1s ease; transition:all 1s ease;
-o-transition:all 1s ease; -ms-transition:all 1s ease;
}
a:focus {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }
}
Welcome
You will need Javascript to do that. You could either handle the animation itself in Javascript completely, or add a click event listener and give the element the class pt-pate-rotateFall within the handler.
I'm trying to chain CSS3 animations together, but they behave very weird sometimes. For example, in this pen, why won't the last animation start? I got it working before, but it doesn't anymore, and I used the same setup. The code I'm pasting here is a little bit simplified, but the animations are exactly the same:
HTML:
<div class="box"></div>
CSS:
body {
padding: 60px;
}
.box {
width: 100px;
height: 100px;
background-color: black;
animation-name: fadeIn, fall, elastic;
animation-timing-function: ease, ease-in, ease-out;
animation-duration: 1s, 0.5s, 0.5s;
animation-delay: 0s, 0s, 0.5s;
animation-fill-mode: forwards, forwards, forwards;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fall {
0% { transform: translateY(-100px); }
100% { transform: translateY(0px); }
}
#keyframes elastic {
0% { transform: translateY(0px); }
20% { transform: translateY(60px); }
40% { transform: translateY(-20px); }
60% { transform: translateY(10px); }
80% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
Maybe I'm wrong... but it seems that this does not "chain" them since they play simultaneously. If that's the case, then the last one probably isn't working because you're already keyframeing translateY in the second animation.
I would like to rotate an image 180 degrees when it is clicked. Then rotate that same image a further 180 degrees (completing the revolution) on subsequent click.
I have achieved the first part using:
.img_rotator_180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.img_rotator_360 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.img_rotator_transition {
-webkit-transition: all 1s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 1s ease-out; /* Firefox 4-15 */
-o-transition: all 1s ease-out; /* Opera 10.50–12.00 */
transition: all 1s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+
}
And
$('div.' + this.id + ' img').addClass('img_rotator_180 img_rotator_transition');
Alternative version:
$('div.' + this.id + ' img').addClass('img_rotator_180 img_rotator_transition');
What happens with this is that the images initial rotation is not remembered meaning that the second rotation effectively redoes the 180 degree rotation.
Is there a way to establish the images current rotation before applying further transformation? Or perhaps a way to append rotation rather than replace it?
Thank you
Demo Fiddle
HTML
<div>Click Me!</div>
jQuery
$('div').on('click', function () {
if ($(this).hasClass('spinIn')) {
$(this).addClass('spinOut').removeClass('spinIn');
} else {
$(this).addClass('spinIn').removeClass('spinOut');
}
});
CSS
div {
display:inline-block;
}
.spinIn {
-webkit-animation: spinIn 0.6s 1 linear;
animation: spinIn 0.6s 1 linear;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
#-webkit-keyframes spinIn {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes spinIn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.spinOut {
-webkit-animation: spinOut 0.6s 1 linear;
animation: spinOut 0.6s 1 linear;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
#-webkit-keyframes spinOut {
0% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinOut {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}