I am trying to find the compatibility issue with Safari to no avail in a CSS glitch text animation, all keyframes are on and the animation is specified with each property, i cut the middle keyframes to make it simpler:
.glitch {
animation-name: glitch-skew;
animation-duration: 1s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.glitch::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: 3px;
text-shadow: -3px 0 #ff00c1;
animation-name: glitch-anim;
animation-duration: 6s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: -3px;
text-shadow: -3px 0 #00fff9, 3px 3px #ff00c1;
animation-name: glitch-anim2;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#keyframes glitch-anim {
0% {
clip: rect(79px, 9999px, 90px, 0);
transform: skew(0.57deg);
}
5% {
clip: rect(4px, 9999px, 59px, 0);
transform: skew(0.73deg);
}
100% {
clip: rect(40px, 9999px, 94px, 0);
transform: skew(0.6deg);
}
}
#keyframes glitch-anim2 {
0% {
clip: rect(96px, 9999px, 50px, 0);
transform: skew(0.7deg);
}
5% {
clip: rect(81px, 9999px, 66px, 0);
transform: skew(0.38deg);
}
100% {
clip: rect(96px, 9999px, 10px, 0);
transform: skew(0.08deg);
}
}
#keyframes glitch-skew {
0% {
transform: skew(0deg);
}
100% {
transform: skew(0deg);
}
}
Any ideas on what could be the issue here? Or maybe there is a way to hide this animation only on safari devices? I know its a long shot
Thank you
try using the -webkit prefix for the animation elements (such as -webkit-animation-duration, -webkit-animation-name, etc.), since safari is a webkit browser, targeting the css styles to its framework should have an impact.
Related
Is it possible to comine css transform with some animation?
I have this tarnsform
transform: translate(-10%, 0px); left: 0px;
which works fine to animate slider left, right scrolling
but I would like to add some fade in animation from opacity 0 to 1
if i understand right, you want both translate and opacity to be included in an animation use this :
div {
width: 100px;
height: 100px;
background: red;
animation-name: fromleft;
animation-delay: 0s;
animation-duration: 0.8s;
animation-fill-mode: backwards;
animation-timing-function: ease-out;
}
#keyframes fromleft {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
<div>
</div>
In the following code, I want to have the square shadow appear and rotate at the same time, but the display does not change. Any help is very appreciated.
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-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);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
It won't work like this because when you have it set to display:none; there's nothing to hover so the hover state never gets fired. You need to use only opacity to hide it rather than display:none;
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity:0;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
opacity: 0.2;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-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);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
You can't hover a non-displayed element. There are a few solutions here, just as making the shadow a child of the test div.
Or, using a + CSS selector. In either case, the hover listener is on the visible element:
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-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);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
You can't animate "Display". If you want to fade in the box, have
display:block;
opacity:0;
and in your animations add
opacity:1;
this will fade in the box as it rotates.
You cannot hover an element not displayed like #shadow (with display:none), but you have to hover #test and apply the css rule to the sibiling next to #test, that is #shadow (using + selector)
#test:hover + #shadow
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow{
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-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);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
I have 2 div ("a" and "b") I'm trying when div "a" slide Up and stop, div "b"
slide Up inside div "a".
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUp"> </div>
</div>
Here is my JSFiddle
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>
translate3d(0, y%, 0) will only translate the element in Y-axis by y% the height of the element. That is 100% would translate it by 10px (height of the child) and 10% would translate it by 1px. In addition you are positioning the element at the bottom of the parent and hence translating it by 1px (end state) is not going to have any visual effect.
You need to do the following changes to achieve the effect that you are looking for:
Use a different animation for the child element, which will move the element from bottom: 0px to bottom: calc(100% - 10px) (the minus 10px is for the height of the element). The first keyframe at bottom: 0px positions the element at the bottom of the container and then gradually move it to the top of the parent element.
Add an animation-delay to the child element that is equal to the animation-duration of parent element. This is required to make sure that the child element does not start animation before the parent element has reached the top.
Note that since you have border-radius set the to the child for the bottom-left and bottom-right, the element won't look nice once it has reached the top.
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.slideInUpChild {
-webkit-animation-name: slideInUpChild;
animation-name: slideInUpChild;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
#keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>
One simple way to overcome the border-radius problem that I have mentioned above would be to do away with the border-radius and let the overflow: hidden setting on the parent take care of it.
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.slideInUpChild {
-webkit-animation-name: slideInUpChild;
animation-name: slideInUpChild;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
#keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>
I'm trying to create a rotating background using css keyframe animation, but I can't get it to rotate at all. I'm not to sure what I'm getting wrong.
Here's my code:
.main-header {
width: 100%;
Height: 128px;
}
.main-header, background {
position: absolute;
z-index: -1;
top: -1px;
height: 248px;
background-color: #ffffff;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nNTAlJyBjeT0nNTAlJyByPSc1MCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojNTJjNWZmOycgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwNzkxYjM7JyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjZyknLz4KCTxzdmcgeD0nNTAlJyB5PSc1MCUnIG92ZXJmbG93PSd2aXNpYmxlJz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg4MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxMDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTIwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDE0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxNjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTgwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDIwMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMjQwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDI2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyODApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzAwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDMyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgzNDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzYwKScvPgoJPC9zdmc+Cjwvc3ZnPg==');
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Here is a JSEDIT link as requested: http://jsbin.com/OMeSaGAp/1/edit
Most probably, that is not what you want, but here you got it working in Chrome
fiddle
You missed the webkit in the transform
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
Most probably you want something like that
changed demo (webkit)
CSS
.main-header {
width: 100%;
Height: 128px;
}
.main-header {
position: absolute;
z-index: -1;
top: -1px;
height: 248px;
overflow: hidden;
}
.main-header:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nNTAlJyBjeT0nNTAlJyByPSc1MCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojNTJjNWZmOycgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwNzkxYjM7JyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjZyknLz4KCTxzdmcgeD0nNTAlJyB5PSc1MCUnIG92ZXJmbG93PSd2aXNpYmxlJz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg4MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxMDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTIwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDE0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxNjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTgwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDIwMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMjQwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDI2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyODApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzAwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDMyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgzNDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzYwKScvPgoJPC9zdmc+Cjwvc3ZnPg==');
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes spin {
from {
-webkit-transform: scale(1.5) rotate(-10deg);
}
to {
-webkit-transform: scale(1.5) rotate(10deg);
}
}
I have displayed the image in a pseudo element that rotates inside the base element. this one has clip enabled, and to have enough image everywhere, I applied a zoom, and limited the degrees of rotation.
Okay so the background of my .featured section works perfectly how I want it to transition.
But how do I make it loop? I.E go 0%, 33%, 66%, 0% etc?
#-webkit-keyframes test{
0% {
background-image: url('../img/15.jpg');
}
33% {
background-image: url('../img/151.jpg');
}
66% {
background-image: url('../img/152.jpg');
}
}
/*Featured Content Background*/
.featured {
background-image: url('../img/15.jpg');
width: 100%;
height: 470px;
margin: auto 0px;
margin-top: -446px;
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;
-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
http://jsfiddle.net/gmRyM/
ANSWER is to use the correct syntax with a default background image
#-webkit-keyframes test{
0% {
background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
}
33% {
background-image: url('http://www.polydevs.com/mystery/img/151.jpg');
}
66% {
background-image: url('http://www.polydevs.com/mystery/img/152.jpg');
}
}
/*Featured Content Background*/
.featured {
background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
width: 100%;
height: 470px;
margin: auto 0px;
/*margin-top: -446px;*/
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;
-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
check this out :
#-webkit-keyframes test{
0% {
background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
}
33% {
background-image: url('http://www.polydevs.com/mystery/img/151.jpg');
}
100% { //Complete the loop.
background-image: url('http://www.polydevs.com/mystery/img/152.jpg');
}
}
.featured {
/*background-image: url('../img/15.jpg');*/
width: 100%;
height: 470px;
margin: auto 0px;
/*margin-top: -446px;*/
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;
-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite; --> add this line.
}
Fiddle
While you already found the misspelt -webkit-iteration-count which has to be -webkit-animation-iteration-count, the true solution for the loop is not to specify a default image, but to actually complete the animation - it doesn't have keyframes now between 66% and 100%. Add a keyframe at 100% to actually make it loop correctly.
Fiddle sample