We Keep Coding

SVG image not display on Safari browser

I have one problem which I don't know how to resolve it.
I have one SVG image and I have added animation on it using CSS it works fine in Chrome and Mozilla except in Safari.
The problem is that I can't see the image displayed in Safari.
<object
type="image/svg+xml"
class="img-sth"
height="150"
width="150"
data="/img/image.svg">
</object>
I have added animation on it using CSS:
.img-sth {
position: absolute;
height: 80px;
top: -3px;
left: 16px;
-webkit-animation:spin-faster 4s linear 0.01s infinite;
-moz-animation:spin-faster 4s linear 0.01s infinite;
animation:spin-faster 4s linear 0.01s infinite;
}
#-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Any idea?

CSS animation of plane flying onto page and landing

I'm looking for a way to animate a plane flying from off-page onto the page. At the moment, I'm using the code below, which is very clunky and not smooth. Do you know a better way to do this using CSS and HTML? If not, using another method?
.plane-animation{
animation: animationFrames linear 3s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 3s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 3s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 3s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
10% {
transform: translate(90%,-30px) rotate(5deg) ;
}
20% {
transform: translate(80%,-40px) rotate(15deg) ;
}
30% {
transform: translate(70%,-50px) rotate(10deg) ;
}
40% {
transform: translate(60%,-60px) rotate(5deg) ;
}
50% {
transform: translate(50%,-70px) rotate(0deg) ;
}
60% {
transform: translate(40%,-60px) rotate(-5deg) ;
}
70% {
transform: translate(30%,-50px) rotate(-10deg) ;
}
80% {
transform: translate(20%,-40px) rotate(-15deg) ;
}
90% {
transform: translate(10%,-30px) rotate(-10deg) ;
}
100% {
transform: translate(0%,0px) rotate(0deg) ;
}
}
<img class="plane-animation" src="http://www.jetcharterrewards.com/images/Plane%20Icons/plane-icon-4.png" alt="Paper Airplane" />

It seems like you're on the right track, and CSS animations should be perfect for the task you're solving. A few quick pointers:
You've made prefixed animation calls like -webkit-, -moz-, -o- and -ms-. However, you've not made any prefixed keyframes. This makes the first part wasted. If you want full browser compatibility you also need prefixed keyframes and prefixed transforms.
Like this:
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
transform: translate(100%,-20px) rotate(0deg) ;
}
}
#-webkit-keyframes animationFrames{
0% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
}
....
and so on.
The other part is more esthetic, but I suggest trying to work on one property at a time. Try drawing your animation in lines on a piece of paper first, figure out the axis and vectors that it's moving on and code one at a time. I'm afraid no-one on here can give you a finished piece of code, but with enough practice, I'm sure you will get the hang of animating.

image rotate 360 degree on click

Need your help developers,
I am using images as a menu. I just want when i click on image it rotate 360 degree and then another page is open.
i try this.
<style>
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:active {
-webkit-transform: rotate(360deg);
}
</style>
html:
<img class="image" src="img path">
in this code image rotation is depend on click time and i want user just click once image rotate 360 degree and the link page display.
but this is not i want.
I am using jqueryMobile and phonegap
thanks in advance.

You can put the link url in the image as a data attribute:
<img id="theimage" data-linkurl="#page2"src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" />
Then when you handle the click event,
You add the animation class.
You add an animationEnd handler that fires when the animation is complete. Use one() instead of on() as you only want this handler to fire once.
In the animationEnd handler you remove the animation class (so you can add it again next time), get the url from the data-attribute, and then navigate to the page.
$("#theimage").on("click", function(){
$(this).addClass("imageRot").one('webkitAnimationEnd mozAnimationEnd oAnimationEnd msAnimationEnd animationend', function () {
$(this).removeClass("imageRot"); //remove anim class
var url = $(this).data('linkurl'); //get url from data-attribute
$( ":mobile-pagecontainer" ).pagecontainer( "change", url); //navigate to page
});
});
For the animation class I have used #cracker's spin animation (thanks cracker!):
.imageRot {
-webkit-animation:spin 2s ease-in-out;
-moz-animation:spin 2s ease-in-out;
animation:spin 2s ease-in-out;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
Here is a working DEMO

you need to try using
.image {
-webkit-animation:spin 4s ease-in-out; // No more infinite
-moz-animation:spin 4s linear;
animation:spin 4s linear;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
OR
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
.rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
DEMO1
DEMO2

try it:
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image:active {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
You didn't include a webkit option (-webkit-*) in transition.
You didn't include a non-webkit option in transform.
because of that, no matter what browser you were using, something were missing (transform or transition), and therefore the code didn't work on any browser.
edit: I noticed it wasn't what you were asking for. I don't believe that it can be done with CSS only. If you want, you can do it with jQuery:
<script>
$(".image").click(function(){
$(this).addClass("clicked").delay(800).removeClass("clicked");
});
</script>
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image.clicked {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>

HTML
<img src = "some_image.png" alt = "test" class = "rotative" />
CSS
.canRotate
{
-webkit-animation: FullRotation 3s ease-out;
-o-animation: FullRotation 3s ease-out;
-ms-animation: FullRotation 3s ease-out;
-moz-animation: FullRotation 3s ease-out;
animation: FullRotation 3s ease-out;
}
#-webkit-keyframes FullRotation
{
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-o-keyframes FullRotation
{
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}
#-ms-keyframes FullRotation
{
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes FullRotation
{
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#keyframes FullRotation
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
JavaScript
function RotateOnClickAndOpenPage(classname, url)
{
var elts = document.getElementsByClassName(classname);
for(var i = 0; i < elts.length; ++i)
{
elts[i].onclick = function(){
this.style.className = "canRotate";
var that = this;
setTimeout(function(){
window.open(url);
that.style.className = "cannotRotate";
}, 3000);
};
}
}
// Exemple
RotateOnClickAndOpenPage("rotative", "http://www.google.fr");

how to rotate image 90 digree on both direction

I am very tried from myself but solving my problem.
My query is:
I have a image I want to rotate this image as flip from start to 90 degree in slow motion and come back from the same way for 90 degree.
please let me know the solution, how will I do?
Thanks in advanced.
i used this code
<style type='text/css'>
.img {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-khtml-transform:speed 5s;
-khtml-transform:speed 5s; /* Safari */
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
/*$('#image').mouseover(function(){
$(this).addClass('img');
}).mouseleave(function(){
$(this).removeClass('img');
});*/
//setTimeout(addclass(),5000)
setTimeout(function(){ addclass(); },5000);
});//]]>
function addclass(){
$("#add_remove").hide();
$("#image").addClass('img');
setTimeout(function(){ removeclass(); },5000);
}
function removeclass(){
$("#add_remove").show();
$("#image").removeClass('img');
setTimeout(function(){ addclass(); },5000);
}
</script>
</head>
<body>
<img id="image" src="robot_upper.png"/>
</body>

You can use CSS3 Transition and Animation
Here is the link and go study.
http://www.w3schools.com/css3/css3_transitions.asp

You can use this for clockwise and anti-clockwise
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
and
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */

I'm not sure if this is exactly what you're after but this does do the rotating.
Edit:
Thought I would post the code here to see if it helps at all.
I have set up the elements as you did and then just used CSS animations to control the transition.
CSS:
/* defines the animation to be used, in this case I have called it 'waving', please note the browser pre-fixes are required for this to work cross browser */
#-webkit-keyframes waving {
0% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(90deg);
}
}
#-moz-keyframes waving {
0% {
-moz-transform: rotate(90deg);
}
50% {
-moz-transform: rotate(-90deg);
}
100% {
-moz-transform: rotate(90deg);
}
}
#-o-keyframes waving {
0% {
-o-transform: rotate(90deg);
}
50% {
-o-transform: rotate(-90deg);
}
100% {
-o-transform: rotate(90deg);
}
}
#keyframes waving {
0% {
transform: rotate(90deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(90deg);
}
}
#image {
-webkit-animation: waving 5s infinite; /* Safari 4+ */
-moz-animation: waving 5s infinite; /* Fx 5+ */
-o-animation: waving 5s infinite; /* Opera 12+ */
animation: waving 5s infinite; /* IE 10+ */
}
CodePen Link

CSS3 animation does not start in Opera if element initially had display: none

I'm trying to show infinitely rotating image after some event in js.
Works perfectly in Chrome 26, Firefox 19, but fails in Opera 12 (latest).
I use initial image with style="display: none" like this:
<img src="http://example.com/img.png" id="test" style="display: none">
Then I show the image (remove display: none):
$('#test').show();
Expected behavior: see rotating image. Rotation does not happen in Opera.
Is this an Opera bug? I know I can start animation by applying it with class after image is shown, but I want to figure out how to trigger it when image has animation set initially.
Animation works fine when the initial image is shown (display: block).
Here is jsFiddle example: http://jsfiddle.net/vdJLL/
CSS which I use for rotation:
#test {
-webkit-animation: rotate 5s linear 0s infinite normal;
-moz-animation: rotate 5s linear 0s infinite normal;
-o-animation: rotate 5s linear 0s infinite normal;
-ms-animation: rotate 5s linear 0s infinite normal;
animation: rotate 5s linear 0s infinite normal;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

I've just ran into the similar problem - I've been trying to js display:none other div (that wasn't even affecting the animation) and got on Opera animation freezed (which, what's even more funny, could be unfreezed by entering dragonfly and re-enabling animation part of style) - so it sounds indeed like an Opera bug.
Anyways, I just learned a workaround - instead of display:none, it'll work with
visibility:hidden; height: 0px;
See also your jsfiddle updated http://jsfiddle.net/vdJLL/3/