Related
what do I need to include to make a white trail following it? I tried adding 10 spans and giving them the same path and delaying each one but it looked so off.
.container{
width: 100vw;
height: 100vh;
background: gray;
}
.orb{
background: #00fff9;
offset-path: path(
"M257.004 129.794C321.128 129.794 380.697 139.056 425.611 154.622C479.727 173.378 513 201.806 513 227.548C513 254.373 477.738 284.575 419.624 303.958C375.689 318.612 317.874 326.262 257.004 326.262C194.596 326.262 135.5 319.081 91.0694 303.797C34.8572 284.455 1 253.863 1 227.548C1 202.015 32.7685 173.806 86.1237 155.079C131.206 139.257 192.246 129.794 256.996 129.794H257.004Z"
);
box-shadow: 0 0 10px #00fff9,
0 0 20px #00fff9,
0 0 30px #00fff9,
0 0 40px #00fff9,
0 0 50px #00fff9,
0 0 60px #00fff9,
0 0 70px #00fff9,
0 0 80px #00fff9,
0 0 90px #00fff9;
border-radius: 50%;
width: 20px;
height: 20px;
animation: move 10s linear infinite;
}
#keyframes move {
100% {
offset-distance: 100%;
}
}
<div class="container">
<div class="orb">
</div>
</div>
Here's an implementation that uses SVG <animateMotion> instead of CSS offset-path. (The path data might look a bit different, but they are basically the same.)
The trail is done with a stroke-dashoffset animation. The path gets the pathLength="100", and is then drawn ten times, each with a stroke-dasharray="2 98". That way, only a dash with a length of 2 of 100 along the path is drawn.
Then, each of the ten copies of the path gets a fading opacity, and its stroke-dashoffset is animated such that they are positioned one behind the other and moving behind the glowing orb. That part gets admitedly a bit verbose, as you need to write an individual animation rule for each of the copies. The combination of them all is then blured to smooth it.
For the orb, a custom SVG filter is used, since the drop-shadow property can't be used directly for SVG grafics.
svg {
background-color: grey;
overflow: visible;
width: 100vw;
height: 100vh;
}
.orb {
fill: #00fff9;
}
.orb :first-child {
filter: url(#glow);
}
.trail {
filter: blur(4px);
}
.trail use {
fill: none;
stroke: white;
stroke-width: 10;
stroke-dasharray: 2 98;
}
.trail :nth-child(1) {
animation: trail1 10s linear infinite;
stroke-opacity: 0.5;
}
#keyframes trail1 {
from {stroke-dashoffset: 2}
to {stroke-dashoffset: -98}
}
.trail :nth-child(2) {
animation: trail2 10s linear infinite;
stroke-opacity: 0.45;
}
#keyframes trail2 {
from {stroke-dashoffset: 4}
to {stroke-dashoffset: -96}
}
.trail :nth-child(3) {
animation: trail3 10s linear infinite;
stroke-opacity: 0.4;
}
#keyframes trail3 {
from {stroke-dashoffset: 6}
to {stroke-dashoffset: -94}
}
.trail :nth-child(4) {
animation: trail4 10s linear infinite;
stroke-opacity: 0.35;
}
#keyframes trail4 {
from {stroke-dashoffset: 8}
to {stroke-dashoffset: -92}
}
.trail :nth-child(5) {
animation: trail5 10s linear infinite;
stroke-opacity: 0.3;
}
#keyframes trail5 {
from {stroke-dashoffset: 10}
to {stroke-dashoffset: -90}
}
.trail :nth-child(6) {
animation: trail6 10s linear infinite;
stroke-opacity: 0.25;
}
#keyframes trail6 {
from {stroke-dashoffset: 12}
to {stroke-dashoffset: -88}
}
.trail :nth-child(7) {
animation: trail7 10s linear infinite;
stroke-opacity: 0.2;
}
#keyframes trail7 {
from {stroke-dashoffset: 14}
to {stroke-dashoffset: -86}
}
.trail :nth-child(8) {
animation: trail8 10s linear infinite;
stroke-opacity: 0.15;
}
#keyframes trail8 {
from {stroke-dashoffset: 16}
to {stroke-dashoffset: -84}
}
.trail :nth-child(9) {
animation: trail9 10s linear infinite;
stroke-opacity: 0.1;
}
#keyframes trail9 {
from {stroke-dashoffset: 18}
to {stroke-dashoffset: -82}
}
.trail :nth-child(10) {
animation: trail10 10s linear infinite;
stroke-opacity: 0.05;
}
#keyframes trail10 {
from {stroke-dashoffset: 20}
to {stroke-dashoffset: -80}
}
<svg viewBox="-10 110 550 240">
<defs>
<filter id="glow" x="-1" y="-1" width="3" height="3">
<feGaussianBlur stdDeviation="12"/><!-- defines how blured the glow is -->
<feComponentTransfer>
<feFuncA type="linear" slope="3"/><!-- defines how bright the glow is -->
</feComponentTransfer>
</filter>
<path id="ellipse" pathLength="100" d="M257 130A256 98 0 1 1 257 326 256 98 0 1 1 257 130Z" />
</defs>
<g class="trail">
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
<use href="#ellipse"/>
</g>
<g class="orb">
<circle r="12"/><!-- defines how wide the glow is -->
<circle r="10"/>
<animateMotion dur="10s" repeatCount="indefinite">
<mpath href="#ellipse"/>
</animateMotion>
</g>
</svg>
You could write the trail animation also with <animate>. It would look like this:
<use href="#ellipse">
<animate attributeName="stroke-dashoffset"
dur="10s" repeatCount="indefinite"
from="2" to="-98" />
</use>
Which variant you use is a matter of taste.
Edit: Generalization
The above code depends on a linear movement of the orb along the path. How would you solve this with different easings? I started to explore that and found the only realistic approach is to draw the trail frame-by-frame from Javascript. An example can be found in this Codepen.
Im tring to create a glitch image animation effect.
I use layers with mix blend modes, and clip paths. but how can I cut part of the main image?
Since I want to achieve the effect of displacing a piece of the picture. Main background can be image too, thats why I can't use background-color in layers.
<div class="glitch-image">
<img class="glitch-image__image" src="https://clipart-db.ru/file_content/rastr/bmw_002.png" alt=""/>
<div class="glitch-image__glitch" style="background-image: url(https://clipart-db.ru/file_content/rastr/bmw_002.png)" alt="">
</div>
</div>
CSS
body
display flex
background-color #000
min-height 70vh
box-sizing: border-box
*
box-sizing: border-box
.glitch-image
width 100%
max-width 500px
margin auto
position relative
&__image
max-width 100%
position relative
z-index 1
display block
vertical-align top
filter: drop-shadow(0px 15px 15px #fff);
&__glitch
position absolute
left 40px
top 0
bottom 0
right 0
width 100%
height 100%
background-size 100%
background-repeat no-repeat
z-index 2
// animation: glitch-anim-1 2s infinite linear alternate;
clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
filter: sepia(1) hue-rotate(303deg) brightness(100%) saturate(200%) drop-shadow(5px 5px 25px red);
#keyframes glitch-anim-1 {
0% {
clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
}
10% {
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
}
50% {
clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
}
60% {
clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
}
70% {
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
}
}
function random_polygon() {
}
See code pen
If you are intrested in a different idea here is another one without JS and only few line of CSS and with transparency:
.box {
width:400px;
height:200px;
margin:auto;
background-image:url(https://clipart-db.ru/file_content/rastr/bmw_002.png);
background-size:0 0;
position:relative;
display:grid;
}
.box::before,
.box::after {
content:"";
grid-area:1/1;
background-image:inherit;
background-size:contain;
background-position:center;
background-repeat:no-repeat;
-webkit-mask-image:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0);
-webkit-mask-size: 100% 20px,100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-composite: destination-out;
mask-composite: exclude;
animation: glitch 1s infinite;
}
.box::after {
-webkit-mask-image: linear-gradient(#000 0 0);
animation:
glitch 1s infinite,
m .2s infinite cubic-bezier(0.5,200,0.5,-200);
}
#keyframes glitch{
0% {-webkit-mask-position:0 20px,0 0}
20% {-webkit-mask-position:0 50% ,0 0}
40% {-webkit-mask-position:0 100%,0 0}
60% {-webkit-mask-position:0 3px ,0 0}
80% {-webkit-mask-position:0 70%,0 0}
100% {-webkit-mask-position:0 0 ,0 0}
}
#keyframes m{
100% {transform:translate(0.1px)}
}
body {
background:linear-gradient(90deg,yellow,lightblue);
}
<div class="box">
</div>
Im tring to create a glitch image animation effect.
Consider using SVG filters: feTurbulence and feDisplacementMap
By changing the attributeName = "baseFrequency" values, you can get the desired effect.
.container {
width:60%;
height:60%;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 350" >
<defs>
<filter id="myFilter" >
<feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
<animate attributeName="baseFrequency" dur="30s" values="0.0001;0.02;0.0001;0.02;0.0001" />
</feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
</filter>
</defs>
<image id="img1" x="-12" xlink:href="https://i.stack.imgur.com/Y6Rh9.jpg" width="100%" height="100%" filter="url(#myFilter)" />
</svg>
</div>
Same effect hover
begin="img1.mouseover" end="img1.mouseout"
.container {
width:60%;
height:60%;
cursor:pointer;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 350">
<defs>
<filter id="myFilter" >
<feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
<animate attributeName="baseFrequency" dur="18s" values="0.0001;0.02;0.0001;0.02;0.0001" begin="img1.mouseover" end="img1.mouseout" />
</feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
</filter>
</defs>
<image id="img1" x="-12" xlink:href="https://i.stack.imgur.com/Y6Rh9.jpg" width="100%" height="100%" filter="url(#myFilter)" />
</svg>
</div>
Update
If you play with the values of the attributes baseFrequency and scale = "15", you can get other interesting effects:
.container {
width:60%;
height:60%;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 350" >
<defs>
<filter id="myFilter" >
<feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
<animate attributeName="baseFrequency" dur="30s" values="0.0001;0.25;0.25;0.0001;0.25;0.0001;0.0001" />
</feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="15" in="SourceGraphic" in2="turbulence" />
</filter>
</defs>
<image id="img1" x="-12" xlink:href="https://i.stack.imgur.com/Y6Rh9.jpg" width="100%" height="100%" filter="url(#myFilter)" style="overflow:hidden1;" />
</svg>
</div>
First of all, it is working 100% fine for me on Chrome, but works just as title described when on Firefox
I'm trying to make a simple animation (using transitions) to run indefinitely when mouseover and to slowly go back to initial position when mouseout
The problem is that it is not behaving the same way in Firefox
As requested, here's a minimized and simplified code that reproduces my current issue:
var arcs = $("#logoSec");
var greenarc = $(".greenarc");
var garcMs = 2100; // In ms
var arcsAnimBool = false; // If false, stops the anim loop
greenarc.css({
transition: "transform " + (garcMs * 1) + "ms ease-in-out"
});
function greenArcNormal() {
if (!arcsAnimBool) return;
greenarc.css("transform", "rotate(70deg)");
setTimeout(greenArcRevert, garcMs); // Call the reverse rotation after garcMs ms
}
function greenArcRevert() {
if (!arcsAnimBool) return;
greenarc.css("transform", "rotate(-70deg)");
setTimeout(greenArcNormal, garcMs); // Call the normal rotation after garcMs ms
}
arcs.hover(
function() { // On mouseover
arcsAnimBool = true;
greenarc.css({
transition: "transform " + (garcMs * 1) + "ms ease-in-out"
});
greenArcNormal();
},
function() { // On mouseout
arcsAnimBool = false; // Set to false to stop the infinite loop of greenArcRevert/Normal
greenarc.css("transform", "rotate(0deg)"); // Revert arc back to initial position
greenarc.css({
transition: "transform " + (garcMs * 0.5) + "ms ease-in-out"
});
}
);
#ArcsLogo {
height: 550px;
}
#logoSec {
display: flex;
background-color: #fdfdfd;
}
<div id="logoSec">
<svg class="arcs" version="1.1" id="ArcsLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-12 30 383.4 407.5" style="enable-background:new 0 0 383.4 407.5;" xml:space="preserve">
<style type="text/css">
.greenarc {
fill: #00ff00;
transform-origin: 50% 50%;
}
.graycircle {
fill: #5d5d5d;
transform-origin: 50% 50%;
}
.redarc {
fill: #ff0000;
transform-origin: 50% 50%;
}
</style>
<path id="GreenArc" class="greenarc" d="M201.1,62.7c-3.2,0-6.3,0.1-9.4,0.3c77.7,5.5,136.2,72.9,130.7,150.6
c-4.9,70-60.7,125.8-130.7,130.7c3.1,0.2,6.3,0.4,9.4,0.4c77.9,0,141-63.1,141-141S279,62.7,201.1,62.7L201.1,62.7z" />
<circle id="GrayCircle" class="graycircle" cx="191.7" cy="203.7" r="21.2" />
<path id="RedArc" class="redarc" d="M60.2,203.7c0-84.6,65.9-154.6,150.4-159.6c-3.1-0.2-6.3-0.3-9.5-0.3
C112.8,43.2,40.7,114.2,40,202.5c-0.7,88.3,70.3,160.4,158.6,161.1c0.8,0,1.7,0,2.5,0c3.2,0,6.3-0.1,9.5-0.3
C126.2,358.3,60.2,288.3,60.2,203.7z" />
</svg>
</div>
(Simplified code in jsfiddle)
https://jsfiddle.net/Ferdam/htxcwanu/28/
(Old full code: https://jsfiddle.net/Ferdam/9kz52e6h/3/)
I have little experience with HTML/JS/JQuery/CSS so I might be missing something basic, I don't know.
Any help is appreciated. Thanks!
Edit:
Quoting directly what I answered to nivoli:
I forgot to mention that I tried using keyframes before, but the
problem is that I couldn't get it to work like the code I provided
because whenever I hoverout the elements just 'teleport' back to
initial position, which is why I started using css transitions.
I just couldn't find a way to animate the elements back to initial position
using keyframes
No javascript necessary; just use css animations. I only did the green one for you:
#ArcsLogo {
height: 550px;
}
#logoSec {
background-color: #fefefe;
}
.greenarc {
fill: #00ff00;
transform-origin: 50% 50%;
transform: rotate(70deg);
animation: myRotate 4200ms alternate infinite ease-in-out;
}
.graycircle {
fill: #5d5d5d;
transform-origin: 50% 50%;
}
.redarc {
fill: #ff0000;
transform-origin: 50% 50%;
}
#keyframes myRotate {
0% {
transform: rotate(70deg);
}
100% {
transform: rotate(-70deg);
}
}
<div id="logoSec">
<svg class="arcs" version="1.1" id="ArcsLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-12 30 383.4 407.5" style="enable-background:new 0 0 383.4 407.5;" xml:space="preserve">
<path id="GreenArc" class="greenarc" d="M201.1,62.7c-3.2,0-6.3,0.1-9.4,0.3c77.7,5.5,136.2,72.9,130.7,150.6
c-4.9,70-60.7,125.8-130.7,130.7c3.1,0.2,6.3,0.4,9.4,0.4c77.9,0,141-63.1,141-141S279,62.7,201.1,62.7L201.1,62.7z" />
<circle id="GrayCircle" class="graycircle" cx="191.7" cy="203.7" r="21.2" />
<path id="RedArc" class="redarc" d="M60.2,203.7c0-84.6,65.9-154.6,150.4-159.6c-3.1-0.2-6.3-0.3-9.5-0.3
C112.8,43.2,40.7,114.2,40,202.5c-0.7,88.3,70.3,160.4,158.6,161.1c0.8,0,1.7,0,2.5,0c3.2,0,6.3-0.1,9.5-0.3
C126.2,358.3,60.2,288.3,60.2,203.7z" />
</svg>
</div>
They key is to define the keyframes, which I just copied from the transform declarations you were making in javascript. Then by adding the animation rule to the greenarc class, we tell it to
use the keyframes myRotate (change the name to whatever you want)
take 4200ms to move from 0% to 100%. I doubled it because I think your logic took 2100ms to move from rotate(0) to rotate(70).
alternate the direction of the animation so that it goes back-and-forth rather than moving in one direction, then snapping back to where it started.
repeat the animation infinitely
use ease-in-out as you were doing in javascript to slow down as it gets closer to the ends.
See the animation documentation for more details and examples.
I have adapted code from this page: Filling water animation to suit my needs as you can see below.
CSS
#banner {
width: 150px;
height: 150px;
background:red;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.rotate {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#banner .fill {
-webkit-transform: translate(0, -75px);
}
#banner #waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
width:300px;
height: 155px;
opacity:0.9;
fill: #fff;
#-webkit-keyframes waveAction {
0% {
-webkit-transform: translate(150px,0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
HTML
<div id="banner">
<div class="fill">
<svg class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
Also...
Please see a screenshot of the output here.
However, I'd like to go one step further and control the level the 'water' is filled via a javascript function.
Usually, I would just control the X and Y position of the DIV that contains the waving SVG but that doesn't appear to work here.
I'd like to use this as a loading infographic but at the moment I can only control the 'water' level using...
}
#banner .fill {
-webkit-transform: translate(0, -75px);
}
I can use values of 0px (0%) to -155px (100%) but ideally I'd like to be able to set a percentage, perhaps by passing a variable in??
NOTE: I've rotated the original SVG because I was struggling to create a new one that worked correctly.
Any help would be much appreciated, I know I'm going to kick myself when I see the solution!! Thankyou.
Get rid of the .rotate and #banner .fill transforms
If you give the svg an id, you can adjust the top margin of the svg using a %
eg
el.style.marginTop = "75%";
Working example: (tested in chrome)
<style type="text/css">
#banner {
width: 150px;
height: 150px;
background:red;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
#water {
margin-top: 99%;
}
#banner #waveShape {
-webkit-animation-name: waveAction;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1s;
width:300px;
height: 155px;
opacity:0.9;
fill: #fff;
}
#keyframes waveAction {
0% {
-webkit-transform: translate(-150px,0);
transform: translate(-150px,0);
}
100% {
-webkit-transform: translate(150, 0);
transform: translate(150, 0);
}
}
</style>
<script>
function fill(percent) {
var el=document.getElementById("water");
if (el == null) {
alert("missing element");
return;
}
el.style.marginTop = (100-percent)+"%";
}
</script>
<div id="banner">
<div class="fill">
<svg id="water" class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
<script>
fill(25); //set fill to 25%
</script>
If that doesn't work you could try simply inserting an empty div before the svg and adjusting the height of that.
I have this code:
<svg height="100" width="100">
<style>
.svg-circle {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.svg-circle:hover {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
</style>
<circle class="svg-circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
It works well in modern browsers. Can I make it works in IE10/IE11? Or I need to use only Javascript?
After long researching I came to the conclusion the best way for cross-browser support — put image in <div> as background-image and apply CSS to it.
JSFiddle
.circle {
width: 100px;
height: 100px;
background: url(http://imgh.us/circle_5.svg) no-repeat;
background-size: 100px 100px;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.circle:hover {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
<div class="circle"></div>
Well, is it force on rotating the <circle/>?
Because you can easily rotate <svg></svg> in all browsers!
If yes, so you are in big trouble because in IE your problem is not only CSS3 support, you going to have some problem with JS, and that's because of rotateX or rotateY!
And even worst, you going to have some problem with animating it in jQuery!
So I used VELOCITY.JS to animating it and you can see this [ SAMPLE ] on IE and change rotateZ by rotateY! (to see rotateY is not working on SVG childs like path, circle, etc)
It seems you have to change your plan!
Hope to help! And by the way! by puting transition on hover state, you don't have it on hover-back!