CSS3 animation transform rotate not working in Firefox - html
I found this animation in codepen.io. Everything is working fine but when I test it in firefox the animation is not working.
The code already has browser prefixes so I do not know what is not working in FF.
<!DOCTYPE html>
<html>
<head>
<style>
.loading {
margin-left:auto;
margin-right:auto;
display:table;
border-width:30px;
border-radius:50%;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
.style-1 {
border-style:solid;
border-color:#001e60 transparent
}
.style-2 {
border-style:double;
border-color:#001e60 transparent;
}
.style-3 {
border-style:double;
border-color:#001e60 #fff #fff;
}
#-webkit-keyframes spin {
100% {
-webkit-transform:rotate(359deg);
}
}
#-moz-keyframes spin {
100% {
-moz-transform:rotate(359deg);
}
}
#-o-keyframes spin {
100% {
-moz-transform:rotate(359deg);
}
}
#keyframes spin {
100% {
transform:rotate(359deg);
}
}
</style>
</head>
<body>
<div style="display: block;" class="loading-container">
<span id="loadingIndicator" class="loading style-3"></span>
</div>
</body>
</html>
The problem is having .loading use display: table; without actually specifying a width or height. Using a table like that to imply size is a bit hacky. Chrome is interpreting those dimensions differently than Firefox. It'd be best to explicitly give it a size using css. Try changing it to a block with a width and height like this:
.loading {
margin-left:auto;
margin-right:auto;
display:block;
border-width:30px;
border-radius:50%;
height: 5px;
width: 5px;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
BIN: https://jsbin.com/nedanayopu/edit?html,output
Related
How do I implement this snowfall code within an email?
I found this code at http://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/ and liked the effect. Though when I put it into my email it creates a huge white space between the tables.
How do I insert this into an email correctly? Do I need to place the div tags in a certain place?
<style>
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.animcontainer{
position:relative;
width:100%;
height:200px;
overflow:hidden;
background-color:#007FFF;
}
.snow{
border-radius:9px;
height:18px;
width:18px;
position:absolute;
top:-20px;
background-color:#ffffff;
}
.snow1{
-webkit-animation: snowanim1 5s linear 0s infinite;
}
.snow2{
-webkit-animation: snowanim2 6s linear 1s infinite;
}
.snow3{
-webkit-animation: snowanim3 7s linear 2s infinite;
}
#-webkit-keyframes snowanim1
{
0% { top:0%;left:50%; }
100% { top:100%;left:65%; }
}
#-webkit-keyframes snowanim2
{
0% { top:0%;left:30%; }
100% { top:100%;left:25%; }
}
#-webkit-keyframes snowanim3
{
0% { top:0%;left:70%; }
100% { top:100%;left:60%; }
}
}
</style>
.
<div class="animcontainer">
<div class="snow snow1"></div>
<div class="snow snow2"></div>
<div class="snow snow3"></div>
</div>
I figured it out in the end, it makes no difference where the div tags are. What was causing the issues was the animcontainer. There is one issue I could not solve however and that was the animation not reaching the bottom of the page despite being "top:100%" within the animation, so I had to do 2000% to actually reach the bottom which does not look like an elegant solution.
svg animation not displaying properly in Chrome
I've created a CSS SVG animation of a frame being drawn onto the stage. The animation works correctly, but there seems to be an issue mostly in Chrome. The stage should be blank before the animation begins and the frame, made up of 4 segments, "draws" in segment by segment. In some versions of Chrome, however, before the animation begins there are 4 dots on the stage. The dots are the beginning points of each segment of the frame and shouldn't be visible.
In a few versions of Chrome that I've tested it on (47.0.2526.106 on a Mac, 47.0.2526.83 on an Android phone, and 43.0.2357.130 for Windows), the dots are visible. In older versions of Chrome (43.0.2357.130 for Mac, for example) and in Safari and Firefox the dots are not visible. Has anyone else encountered a similar issue? Any help will be appreciated.
Here is a working example in a jsfiddle.
Here is the HTML:
<div id="mainContainer">
<div id="bottomLeftPosition">
<svg><path class="pathBottomLeft framePath" d="M127.504,105.451
c1.394-0.461,0.629-2.404,0.735-3.859c0.047-0.719,0.826-1.225,0.368-2.021c-0.338-0.598-1.333-0.398-2.39-0.735
c-1.424-0.442-1.931-1.087-3.493-0.735c-2.143,0.475-7.396,4.611-8.453,6.25c-0.674,1.041-1.501,3.322-1.471,4.227
c0.045,1.363,2.036,4.655,2.573,5.146c2.036,1.852,6.769,2.986,10.107,2.389c1.715-0.307,2.97-1.578,4.593-1.654
c2.084-2.389,4.381-4.564,6.066-7.352l0.887-5.713l-1.071-5.314c-1.286-3.615-4.104-5.696-6.064-8.637
c-1.579-0.965-3.461-1.058-5.147-1.84c-0.75-0.352-1.254-1.148-2.021-1.47c-1.775-0.735-3.98-0.245-5.696-1.47
c-7.427-0.858-13.187,0.994-19.665,2.021c-14.793,5.359-29.726,12.865-42.453,20.766c-1.011,0.628-2.022,1.426-3.125,2.021
c-1.93,1.043-3.293,1.533-5.697,2.389c-1.256,0.445-2.39,1.38-3.492,1.654c-4.642,1.166-9.604-1.285-12.498-4.225
c-0.934-2.758-2.573-5.451-2.389-9.926c0.077-1.852,1.01-3.538,0.551-5.329c3.186-8.179,6.616-16.249,11.578-23.708
c0.415-0.627,1.226-1.041,1.655-1.654c0.643-0.934,0.872-2.266,1.47-3.307c0.551-0.98,1.547-1.7,2.022-2.573
c1.592-2.911,2.389-7.168,2.94-10.66c0.245-1.547-0.261-2.925-0.368-4.595c-0.092-1.409,0.23-2.879,0.185-4.411
c-0.092-3.768-0.766-8.071-1.287-11.946c-0.291-2.145-0.26-4.84-1.103-6.8c-1.057-2.466-3.277-3.538-4.594-6.065
c-2.251-0.75-4.519-1.485-6.433-2.572L29.73,14.11c-2.634,0.214-3.967,1.777-6.065,2.94C21,20.665,13.879,30.804,18.152,35.98
c2.205,2.665,4.456,6.249,8.821,4.228c0.583-2.144,4.028-3.905,5.513-6.616c0.199-0.368,0.153-1.011,0.368-1.471
c0.367-0.75,0.995-1.24,1.103-1.837c0.062-0.367-0.336-3.89-0.551-4.595c-0.75-2.542-3.706-2.036-4.594,0"/></svg>
</div>
<div id="topLeftPosition">
<svg><path class="pathTopLeft framePath" d=
"M29.638,109.531c1.792-2.664,3.92-8.469,1.838-12.13c-0.75-0.123-1.087-0.55-1.654-0.919c-1.118-0.703-1.731-1.071-2.94-1.654
c-1.348-0.643-0.919-0.489-2.573-0.551c-1.976-0.062-2.665,0.443-4.043,1.654c-2.604,2.297-5.146,5.514-5.513,9.373
c-0.705,7.458,4.717,12.42,9.924,14.702c0,0,2.281,0.2,2.343,0.214c0.138,0,2.251-0.582,2.251-0.582
c1.93-0.918,3.094-2.449,4.595-3.857c1.057-0.981,2.22-1.303,3.124-2.572c0.521-0.736,1.011-1.824,1.654-2.758
c0.583-0.857,1.486-1.73,1.838-2.389c0.384-0.719,0.245-1.593,0.552-2.572c0.275-0.857,1.042-1.762,1.286-2.573
c0.903-2.972,0.659-7.366,0.552-10.292c-0.261-7.488-2.405-13.509-4.778-19.481c-0.751-1.915-2.083-3.476-2.941-5.33
c-0.628-1.362-1.087-2.817-1.838-4.226c-0.95-1.792-2.359-2.772-2.573-5.146c-2.374-3.553-3.584-7.903-4.962-12.129
c-0.475-1.456-1.287-3.064-1.471-5.513c-0.367-4.992,1.976-9.327,3.86-13.417c1.271-2.772,2.71-5.252,4.41-6.799
c5.989-5.438,16.847-8.333,26.648-8.088c4.794,0.123,9.909,0.581,14.152,2.021c1.486,0.506,3.032,1.286,4.595,1.837
c1.593,0.552,3.384,0.98,4.779,1.654c1.838,0.889,3.553,2.39,5.329,3.492c3.095,1.915,5.667,3.048,8.086,5.331
c2.543,2.404,4.442,5.482,6.802,7.902c2.557,2.635,5.713,4.012,8.453,6.249c2.863,0.812,5.729,1.624,7.902,3.124
c11.579,2.635,21.748-2.113,25.729-9.924c0,0,1.47-9.266,0.919-11.548c0.046-0.72-1.103-4.809-1.103-4.809
c-1.424-2.374-2.895-4.028-5.022-5.698c-0.949-0.827-3.568-2.803-6.785-1.179c-2.955,2.144-5.851,7.596-2.298,11.026
c2.358,2.268,6.311,1.731,9.558,2.206"/></svg>
</div>
<div id="topRightPosition">
<svg><path class="pathTopRight framePath" d="M25.065,32.641
c0,0,4.334-2.696,4.518-2.833c2.696-1.869,5.728-2.864,6.065-6.616c-0.995-7.259-8.883-7.32-12.772-4.15
c-2.849,2.312-5.391,7.473-5.391,12.512c0,2.021-0.015,5.223,0.919,7.352c0.674,1.532,2.925,3.706,4.962,4.411
c0.719,0.246,1.776,0.124,2.572,0.368c1.761,0.536,2.451,1.363,5.33,1.103c6.371-0.567,12.023-1.516,17.827-2.94
c1.257-0.307,2.052-0.842,3.309-1.287c1.593-0.582,3.385-0.582,4.963-1.103c2.894-0.965,5.773-2.375,8.637-3.492
c3.033-1.179,6.126-2.205,9.005-3.492c6.294-2.818,12.649-7.03,19.113-9.557c2.528-0.995,5.054-1.562,7.167-3.124
c0.675,0.061,1.195-0.031,1.654-0.184c4.624-2.926,12.865-3.645,19.113-3.676c1.041,0.612,2.129,1.179,3.676,1.286
c3.047,2.007,6.77,4.793,8.637,8.822c1.656,3.553,2.145,7.888,2.574,12.314c0.229,2.451-0.385,5.314-0.367,7.903
c0.107,13.768-7.704,24.688-11.763,35.653c-2.466,2.236-2.772,5.896-4.593,9.924c-0.322,0.721-0.995,1.286-1.287,2.021
c-2.344,5.881-3.83,15.408-0.185,20.217c1.685,2.221,7.169,4.977,10.661,3.859c2.268-0.72,3.521-2.543,5.145-4.41
c0.245-6.005-2.387-9.129-5.879-11.396c-1.104,0.309-1.93-0.211-2.757,0.369c-0.49,0.703-0.124,1.393-0.185,2.389"/></svg>
</div>
<div id="bottomRightPosition">
<svg><path class="pathBottomRight framePath" d="
M133.236,18.858c0.106,1.517-3.018,6.448,0.184,7.168c1.256,0.275,3.782-1.087,4.962-1.838c2.757-1.761,4.228-5.773,4.779-8.271
c-0.981-2.189-2.282-4.793-4.595-5.88c-3.645-1.716-8.867-0.153-11.027,2.205c-2.45,2.68-4.41,7.979-4.778,13.049
c-0.291,4.088,0.95,6.371,3.308,8.454c1.961,1.746,4.61,2.788,6.618,4.595c0.153,0.138,0.353,0.521,0.55,0.735
c2.007,2.159,3.507,4.441,4.963,7.536c0.658,1.393,1.026,5.575,1.471,7.657c0.628,2.91,1.623,6.264,1.838,9.005
c0.904,11.777-0.154,23.968-6.8,31.611c-1.731,1.163-3.309,2.647-5.147,3.858c-1.699,1.103-3.415,2.634-5.329,3.492
c-0.873,0.382-2.006,0.382-2.94,0.733c-5.238,1.962-11.104,2.59-17.828,3.31c-4.762,0.521-8.898,0.949-14.52,1.103
c-4.746,0.123-9.158,1.103-12.864-0.184c-3.69-0.153-6.708-2.129-10.475-2.205c-2.328-1.348-5.452-2.465-8.086-2.94
c-1.731-1.808-5.299-1.257-7.167-2.206c-0.888-0.153-0.659,0.812-1.654,0.552c-1.501-0.644-3.033-1.257-4.779-1.654
c-0.627-0.169-0.536-1.058-1.103-1.286c-2.971-0.904-4.961-3.554-7.718-4.596c-0.384-0.137-0.98,0.123-1.471,0
c-0.949-0.229-1.898-1.147-2.756-1.285c-9.802-1.517-18.486,8.055-16.54,17.09c0.321,1.486,0.413,3.493,2.052,5.897
c3.752,4.364,7.918,1.716,10.66-1.286c1.47-1.609,3.614-8.729,0.276-9.006c-2.85-0.23-5.391,3.338-5.882,3.491"/></svg>
</div>
<div id="border"></div>
</div>
And the CSS:
body {
margin:0;
padding:0;
}
#mainContainer{
position: relative;
width: 300px;
height: 600px;
overflow: hidden;
background-color: #fff;
}
#border{
position:absolute;
width:298px;
height:598px;
border:solid 1px #000;
}
#bottomLeftPosition{
position:absolute;
left:5px;
top:231px;
}
#topLeftPosition{
position:absolute;
left:9px;
top:123px;
}
#topRightPosition{
position:absolute;
left:140px;
top:116px;
}
#bottomRightPosition{
position:absolute;
left:130px;
top:226px;
}
.framePath {
width:160px;
height:130px;
fill:none;
stroke:#000;
stroke-width:3;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.pathBottomLeft {
animation: dash 1.7s linear 1.5s forwards;
-webkit-animation: dash 1.7s linear 1.5s forwards;
-moz-animation: dash 1.7s linear 1.5s forwards;
}
.pathTopLeft {
animation: dash 1.7s linear 2.2s forwards;
-webkit-animation: dash 1.7s linear 2.2s forwards;
-moz-animation: dash 1.7s linear 2.2s forwards;
}
.pathTopRight {
animation: dash 1.7s linear 2.9s forwards;
-webkit-animation: dash 1.7s linear 2.9s forwards;
-moz-animation: dash 1.7s linear 2.9s forwards;
}
.pathBottomRight {
animation: dash 1.7s linear 3.5s forwards;
-webkit-animation: dash 1.7s linear 3.5s forwards;
-moz-animation: dash 1.7s linear 3.5s forwards;
}
#keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
I don't necessarily think this is a bug, but it should certainly be fixed. Because there is a line with what seems to be a length of 0, you'd think it'd be invisible. But in these builds of Chrome, a line with a length of 0 and a positive stroke-width, will render. Just like how the browser will still render a div when it has been given a height of 0 but also a border thicker than 0. If you want to solve the issue, You can add something like visibility: hidden; or opacity: 0; to .framePath, and then add the opposite to the animation (at 0% and 100%)
Delay in infinite fade in & out CSS3 animation
I am working on the below:
Fiddle Code
Here is HTML:
<div id="animation">
<ul>
<li>this is</li>
<li>CSS3 looped</li>
<li>animation</li>
</ul>
</div>
This is the CSS:
#animation {
height: 100%;
width: 100%;
}
#animation ul {
position: relative;
text-align: center;
width: 100%;
}
#animation li {
position: absolute;
left:0;
top:0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) {
-webkit-animation: fadein 6s ease-in-out -4s infinite alternate;
-moz-animation: fadein 6s ease-in-out -4s infinite alternate;
animation:fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) {
-webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
-moz-animation: fadein 6s ease-in-out 0s infinite alternate;
animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) {
-webkit-animation: fadein 6s ease-in-out 4s infinite alternate;
-moz-animation: fadein 6s ease-in-out 4s infinite alternate;
animation: fadein 6s ease-in-out 4s infinite alternate;
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
I am new to CSS3 and with the code I want to stick paragraphs in instead of a couple of words. My question is, when the text fades in, how can you keep it on the screen for eg 10 seconds so someone can read it and the fade out into the next paragraph.
I have used duration and delay, doesn't really seem to work the way I wanted. Any help will be great.
The approach is really simple but you would need to do math as mentioned in Paulie_D's comment. I would leave the choice on whether to use it or not to you. Personally, I don't see anything wrong with this approach or any complexity provided the no. of elements to be faded in/out is static.
The overall approach is as follows:
We have 3 elements/paragraphs and for the example purpose I am going to make them fade-in for the first 3 seconds, stay as-is for the next 10 seconds and fade out for the last. So, for each element we need a total of 16 seconds in animation time.
While the first element has completed its animation and the second or third is being animated, the previous ones should hold the final state (that is faded out). To achieve this, the following need to be done:
Set the animation-duration for all elements such that it is the sum total of animation times for all elements. Here it would be 3*16s = 48s.
Set the keyframes such that each element would remain idle for 32s of the total duration because during this 32s gap the other two elements would be doing their animation. This is achieved by completing the fade-in, the stay and the fade-out all together within 33% of the animation's total duration.
Set animation-delay of second element to be 16s (because it has to start after the first one is completed) and that for the third to be 32s (because first two should complete).
Coming to the keyframes rule itself, as I said earlier the whole animation for one element should complete within 33% of the full duration. So at 6.25% (roughly 3s mark), we fade the element in and then till 26.75% (which is till 13s mark) we make it be at opacity: 1 and then at 33% (that is 16s mark) we completely fade it out.
#animation {
height: 100%;
width: 100%;
}
#animation ul {
position: relative;
text-align: center;
width: 100%;
}
#animation li {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) {
animation: fadein 48s ease-in-out infinite;
}
#animation li:nth-of-type(2) {
animation: fadein 48s ease-in-out 16s infinite;
}
#animation li:nth-of-type(3) {
animation: fadein 48s ease-in-out 32s infinite;
}
#keyframes fadein {
0% {
opacity: 0;
}
6.25% { /* 3s for fade in */
opacity: 1;
}
26.75% { /* roughly 10s for stay as-is */
opacity: 1;
}
33% { /* 3s for fade out */
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="animation">
<ul>
<li>This is</li>
<li>CSS3 looped</li>
<li>animation</li>
</ul>
</div>
The basic CSS code for this example looks like this:
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it’s ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We’re doing this by declaring a transition on the visibility property, with a 0s duration and a delay.
At the end of the fade-out transition, we want to remove the hidden element from the flow, so that it does not leave a blank space in the middle of the page. Sadly we don’t have many options here:
display:none doesn’t work because it will be applied instantly, and
trying to delay it like we did with visibility won’t work;
position:absolute has the exact same issue;
It’s not ideal, but we can use margin-top (it can be transitioned and
thus delayed).
In order to use margin-top to hide the element, we need to have a slightly richer HTML structure:
<div class="visible">
<div>…</div>
</div>
And our CSS code becomes more complex:
.visible,
.hidden {
overflow: hidden;
/* This container should not have padding, borders, etc. */
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.visible > div,
.hidden > div {
/* Put any padding, border, min-height, etc. here. */
}
.hidden > div {
margin-top: -10000px;
transition: margin-top 0s 2s;
}
hover and play animation once instead of looping
If you look at my code and run it.
#-webkit-keyframes circle {
from { transform:rotate(0deg); }
to { transform:rotate(180deg); }
}
#-webkit-keyframes inner-circle {
from { transform:rotate(0deg); }
to { transform:rotate(-180deg); }
}
#one {
position: absolute;
left: 500px;
top: 200px;
width:100px;
height:100px;
border-radius: 50px;
background-color: #000000;
}
#two {
width:100px;
height:100px;
margin: 0px auto 0;
color:orange;
font-size:100px;
line-height:1;
transform-origin:50% 200px;
}
#one:hover > div {
animation: circle 1s linear infinite;
-webkit-animation: circle 1s linear infinite;
}
#one:hover > div > div {
animation: inner-circle 1s linear infinite;
-webkit-animation: inner-circle 1s linear infinite;
}
</style>
<div id="one">
<div id="two"><div id="three">☻</div></div>
</div>
you will notice that the smile face keeps on looping the animation of rotating 180deg. I don't want this. I only want it to do the animation once every time I hover over the black circle. How do I do this?
If you don't want the animation to occur infinitely, remove infinite from the animation shorthand.
In addition, you will also need to add forwards in order to to prevent the animation from resetting each time. When adding forwards to the animation shorthand, you are essentially changing the property animation-fill-mode from the default value of none to forwards.
From MDN:
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.
#one:hover > div {
animation: circle 1s linear forwards;
-webkit-animation: circle 1s linear forwards;
}
#one:hover > div > div {
animation: inner-circle 1s linear forwards;
-webkit-animation: inner-circle 1s linear forwards;
}
Change all the infinite values to the amount of times you want the animation to loop. In your case it will be once so you want to change infinite to 1.
Animation delay property to change content at fixed intervals
I am trying to animate two pictures so that they change at fixed intervals but the problem is that the second image appears quickly and fades I need a way to make the delay property to repeat i have refereed this but that doesn't seem to work CSS animation delay in repeating
http://jsfiddle.net/fc3nb5rL/2/
I think my problem is somewhere here
#-webkit-keyframes anim {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.back {
-webkit-animation:anim 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes anim2 {
from {
z-index:1;
}
to {
z-index:-2;
}
}
First fix your HTML(markup), then you can animate the opacity and not the z-index
.container {
position:relative;
height:500px;
width:500px;
margin:0 auto;
}
.container img {
position:absolute;
width:100%;
}
#-webkit-keyframes anim1 {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes anim2 {
from {
opacity:1;
}
to {
opacity:0;
}
}
[href=first] img {
opacity:0;
/*animation----:----name--duration--delay--timing function---direction----iteration count*/
-webkit-animation: anim1 2s 0s linear alternate infinite;
}
[href=second] img {
opacity:1;
-webkit-animation: anim2 2s 0s linear alternate infinite;
}
<div class="container">
<a href="second">
<img src="http://placekitten.com/300/300" />
</a>
<a href="first">
<img class="front" src="http://placekitten.com/300/301" />
</a>
</div>
Give this a shot. I have also set it up to be cross-browser compatible. http://jsfiddle.net/fc3nb5rL/2/ A few things to note about CSS3 transitions. It does not know how to interpolate between the z-index property, as well as the display property.