I have managed to create an SVG animation using an SVG clip path and CSS that works correctly in Google Chrome, Opera and Safari. However, in Firefox, the SVG is clipped but none of the CSS code for the animation seems to be applied.
On other browsers, there is an inital delay of three seconds and then the clip path scales up to gradually reveal the entire image. Does anyone know why I cannot get this code to work on Firefox?
Alternatively, is there any way to ensure that the whole image is displayed in browsers that do not support the animation?
body {
margin: 0;
}
img, svg {
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
#carClip {
-ms-transform: scale(0.5) translate(1950px,380px); /* IE 9 */
-webkit-transform: scale(0.5) translate(1950px,380px); /* Safari and Chrome */
-o-transform: scale(0.5) translate(1950px,380px); /* Opera */
-moz-transform: scale(0.5) translate(1950px,380px); /* Firefox */
transform: scale(0.5) translate(1950px,380px);
}
.container {
max-width: 100%;
width: 100%;
overflow:hidden;
background-color: rgb(108,110,112);
}
.clip-shape {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: center center;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: center center;
-webkit-animation: scale 18s forwards 1;
-moz-animation: scale 18s forwards 1;
-o-animation: scale 18s forwards 1;
-ms-animation: scale 18s forwards 1;
animation: scale 18s forwards 1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#-webkit-keyframes scale {
0% { -webkit-transform: scale(0.5); }
100% { -webkit-transform: scale(11); }
}
#-o-keyframes scale {
0% { -o-transform: scale(0.5); }
100% { -o-transform: scale(11); }
}
#-moz-keyframes scale {
0% { -moz-transform: scale(0.5); }
100% { -moz-transform: scale(11); }
}
#-ms-keyframes scale {
0% { -ms-transform: scale(0.5); }
100% { -ms-transform: scale(11); }
}
#keyframes scale {
0% { transform: scale(0.5); }
100% { transform: scale(11); }
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="auto" viewBox="0 0 1809 692">
<defs>
<clipPath id="carClip">
<polygon class="clip-shape" fill="none" id="thePath" points="174 75 542 0 669 363 396 546 0 324 174 75"></polygon>
</clipPath>
</defs>
<image clip-path="url(#carClip)" width="1809" height="692" xlink:href="http://dev.lexuspreciousmetal.tsadvertising.co.uk/wp-content/themes/lexus/images/banner.png" ></image>
</svg>
</div>
Related
I've been trying to animate this heart SVG and this codepen seems to work fine in chrome, firefox, and safari on Mac but in IE 11+ I can't seem to find a resolution anywhere.
All I need it to do is to fade in, grow, and fade out but IE doesn't seem to scale up in the keyframe no matter what I try.
Thanks in advance!
<svg version="1.1" class="svg-pulse" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 42.7" enable-background="new 0 0 60 42.7" xml:space="preserve">
.svg-pulse { width: 100vw; height: 100vh; }
#-webkit-keyframes svg_pulse { 0% {
radius: 10;
transform-origin: center center;
transform: scale(.1);
opacity: 0; } 25% {
opacity: .1; } 50% {
opacity: .1; } 100% {
transform-origin: center center;
transform: scale(.8);
opacity: 0; } }
#keyframes svg_pulse { 0% { /* radius: 5; */
-ms-transform-origin: center center;
transform-origin: center center;
-ms-transform: scale(.1);
transform: scale(.1);
opacity: 0; } 25% {
opacity: .1; } 50% {
opacity: .1; } 100% {
-ms-transform-origin: center center;
transform-origin: center center;
-ms-transform: scale(.8);
transform: scale(.8);
opacity: 0; } }
.svg-pulse .pulse { animation: svg_pulse 6s ease; animation-iteration-count: infinite; fill: hotpink; }
.svg-pulse .two { opacity: 0; animation-delay: 1.5s; }
.svg-pulse .three { opacity: 0; animation-delay: 3s; }
.svg-pulse .four { opacity: 0; animation-delay: 4.5s; }
Msdn_svg Even according to Microsoft simple SVG animation does not work on Internet Explorer, without the addition of JavaScript.
[MSDN_SVG_animationGuide][1]
This is in agreement with my own experience.
I have a problem with a image I added to the header It doesn't seem to display in Chrome but is does display on Safari and Firefox. I have 3 black banners/flags on the top left of the screen. The middle doesnt display on chrome. Does anyone have a suggestion or an idea why it doesn't display?
header.php:
<div class="header_inner clearfix">
<div class="marketing-top">
<img src="/wp-content/uploads/2015/04/Banner-header-marketing.png" alt="marketing">
<img class="space" src="/wp-content/uploads/2015/04/Banner-header-design.png" alt="design">
<div class="header-img animated swing">
<img src="/wp-content/uploads/2015/05/banner-header-web-design.jpg" alt="webdesign">
</div>
</div>
css:
.marketing-top {
padding-left: 180px;
position: absolute;
float: left;
left: 100px;
}
.marketing-top .space{
position: absolute;
float:left;
left:280px;
bottom:57px;
}
.header-img {
position: absolute;
float:left;
left:230px;
bottom:0px;
}
#media screen and (max-width: 1250px) {
.marketing-top{
display: none;
}
}
.swing {
animation-name: swing;
transform-origin: center top 0;
}
.animated {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes swing {
0% {
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
20% {
transform: rotate(1deg);
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(-1deg);
animation-timing-function: ease-in-out;
}
60% {
transform: rotate(0.5deg);
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(-0.5deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
}
Thanks in advance!
Vonwelzen
Related URL: http://www.elephantdesign.nl
6 hours ago
Its because width of .header-img is 0 in your case. Explicitly assign a width greater than image width
.header-img{
width:50px;
}
I am new to CSS3 keyframe animations and I'm trying to create animation with three images, where each image would stay for 2 seconds, then change to 2nd image, which would stay 2 seconds as well and then change to the last 3rd image, which would also stay 2 seconds. This animation would then loop back to the first image...second...third...etc.
I have created the following Fiddle: http://jsfiddle.net/klarita/yyRQ8/
I know the stylesheet is a mess at the moment as I can't work it out, Could anyone advice please.
I will need to use the same technique for 6 images later on, just need to understand how it all works.
HTML:
<div id="crossfade">
<img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg" alt="Image 1">
<img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg" alt="Image 2">
<img src="http://farm3.static.flickr.com/2657/5739934564_357f849b58_z.jpg" alt="Image 3">
</div>
CSS:
#crossfade > img {
width: 185px;
height: 185px;
position: absolute;
top: 100px;
left: 100px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 10s linear infinite 0s;
-moz-animation: imageAnimation 10s linear infinite 0s;
-o-animation: imageAnimation 10s linear infinite 0s;
-ms-animation: imageAnimation 10s linear infinite 0s;
animation: imageAnimation 10s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-o-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
<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 ; }
I made some CSS animations, and on WebKit (Safari/Chrome), it works fine, but on Firefox the timing is messed up.
JSFiddle: http://jsfiddle.net/jmorais/p5XCD/1/
Code:
var open = false;
var intransition = false;
function openCard() {
intransition = true;
$('.out').addClass('openingOut');
$('.in-left').addClass('openingIn');
setTimeout(function() {
$('.out').css("z-index", "2");
$('.in-left').css("z-index", "3");
}, 850);
setTimeout(function(){
$('.out').removeClass('openingOut').addClass('outOpen');
$('.in-left').removeClass('openingIn').addClass('inOpen');
open = true;
intransition = false;
}, 3000);
}
function closeCard() {
intransition = true;
$('.out').addClass('closingOut');
$('.in-left').addClass('closingIn');
setTimeout(function() {
$('.out').css("z-index", "3");
$('.in-left').css("z-index", "2");
}, 1000);
setTimeout(function(){
$('.out').removeClass('closingOut').removeClass('outOpen');
$('.in-left').removeClass('closingIn').removeClass('inOpen');
open = false;
intransition = false;
}, 3000);
}
function toggleCard() {
if (intransition) { return; }
if (open) {
closeCard();
} else {
openCard();
}
}
body {
margin-left: 350px;
}
.tile {
position:absolute;
width:350px;
height:400px;
left: 50%;
margin: 0 auto;
background: pink;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.out {
z-index: 3;
}
.in-left {
z-index: 2;
left: -350px;
-webkit-transform: rotateY(-180deg);
-webkit-transform-origin: 100% 100%;
-moz-transform: rotateY(-180deg);
-moz-transform-origin: 100% 100%;
}
.in-right {
z-index: -1;
}
.content {
border: 3px black double;
margin: 10px;
padding: 20px;
height: 335px;
}
.perspective {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
position: relative;
display: inline-block;
}
/*****************************************
* Open
******************************************/
.openingOut {
/* Webkit */
-webkit-animation-name: open-card-out;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: open-card-out;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.openingIn {
/* Webkit */
-webkit-animation-name: open-card-in;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: open-card-in;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.outOpen {
-webkit-transform: rotateY(180deg);
-webkit-transform-origin: 0 0;
-moz-transform: rotateY(180deg);
-moz-transform-origin: 0 0;
}
.inOpen {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 0 0;
-moz-transform: rotateY(0deg);
-moz-transform-origin: 0 0;
}
/* Webkit */
#-webkit-keyframes open-card-out {
from {
-webkit-transform-origin: left 0%;
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform-origin: left 0%;
-webkit-transform: rotateY(-180deg);
}
}
#-webkit-keyframes open-card-in {
from {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(180deg);
}
to {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(0deg);
}
}
/* Firefox */
#-moz-keyframes open-card-out {
from {
-moz-transform-origin: left 0%;
-moz-transform: rotateY(0deg);
}
to {
-moz-transform-origin: left 0%;
-moz-transform: rotateY(-180deg);
}
}
#-moz-keyframes open-card-in {
from {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(180deg);
}
to {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(0deg);
}
}
/*****************************************
* Close
******************************************/
.closingOut {
/* Webkit */
-webkit-animation-name: close-card-in;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: close-card-in;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.closingIn {
/* Webkit */
-webkit-animation-name: close-card-out;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: close-card-out;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
#-webkit-keyframes close-card-in {
from {
-webkit-transform: rotateY(-180deg);
-webkit-transform-origin: 0% 0%;
}
to {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 0% 0%;
}
}
#-webkit-keyframes close-card-out {
from {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(180deg);
}
}
#-moz-keyframes close-card-in {
from {
-moz-transform: rotateY(-180deg);
-moz-transform-origin: 0% 0%;
}
to {
-moz-transform: rotateY(0deg);
-moz-transform-origin: 0% 0%;
}
}
#-moz-keyframes close-card-out {
from {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(0deg);
}
to {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(180deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="perspective" onclick="toggleCard();">
<div class="tile out out">
<div class="content">
<p>out</p>
</div>
</div>
<div class="tile in-left">
<div class="content">
<p>in-left</p>
</div>
</div>
<div class="tile in-right">
<div class="content">
<div style="display: table; height: 100%; width: 100%;">
<p>in-right</p>
</div>
</div>
</div>
</div>
As you can see, the in-left div opens in the same time as the out div if you're using Safari/Chrome, but on Firefox it will open at different times, messing up the whole animation.
How can I fix this?
An answer is not needed because the animation effects are the same in both browsers, stable builds tested.
Chrome:
19.0.1084.56 (Official Build 140965) m
Firefox:
Mozilla/5.0 (Windows NT 5.1; rv:13.0) Gecko/20100101 Firefox/13.0
How ironic this non-answer is an answer.
To be sure, flush out your browsers cache and test on another PC for verification.
I am agree with arttronics, I saw that you test all css3 available solutions but I think there are just 2 posible solution without using css3 at all
just wait until firefox improve its performance with css3 animation and transition, I personally think that this won't be for so long
to use an alternative to make that animation like canvas, I think that this is not going to be easy, but I think that this is a posible solution only if you really need that animation running