I have found many answers on this site before however on this subject I only find solutions about using -webkit- which I think I do properly, or put the non-tag animation on the bottom which I also do.
I have these boxes (and some more as well), made from divs, that are clickable and tiny, and when someone pushes the button "HELP" I want the clickable objects to do an animation to show they are clickable.
To achieve this I set a class (.ayuda) on the bigger container I have (#body translated), this matches the ".ayuda .help" for css and triggers the animation on Firefox, however on Chrome it doesn't work for any of the animations( it does nothing at all)
HTML
<div id="cuerpo">
<div id="pegatina">
<div id="north_vul" class="NS_vul help" onclick="changevul('NS')"></div>
<div id="west_vul" class="EW_vul help" onclick="changevul('EW')"></div>
<div id="east_vul" class="EW_vul help" onclick="changevul('EW')"></div>
<div id="south_vul" class="NS_vul help" onclick="changevul('NS')"></div>
<div class="estuchenum help2" onclick="eticlick()"><p></p></div>
</div>
<section id="botones_crear">
<p class="blue button" onclick=" $('#cuerpo').addClass('ayuda'); setTimeout(function() {$('#cuerpo').removeClass('ayuda');},2000);">HELP</p>
</section>
</div>
CSS
.NS_vul{
cursor: pointer;
height: 15%;
border: 1px solid rgb(78, 78, 78);
}
.EW_vul{
cursor: pointer;
width: 18%;
border: 1px solid rgb(78, 78, 78);
top: 22%;
bottom: 23%;
}
#north_vul{
position: absolute;
top: 2%;
left: 2%;
right: 2%;
}
#south_vul{
position: absolute;
bottom: 2%;
left: 2%;
right: 2%;
}
#west_vul{
position: absolute;
left: 2%;
}
#east_vul{
position: absolute;
right: 2%;
}
.ayuda .help{
z-index:200;
-webkit-animation: ayuda 1s linear;
-moz-animation: ayuda 1s linear;
-ms-animation: ayuda 1s linear;
-o-animation: ayuda 1s linear;
animation: ayuda 1s linear;
}
.ayuda .help2{
z-index:210;
-webkit-animation: ayuda2 2s linear;
-moz-animation: ayuda2 2s linear;
-ms-animation: ayuda2 2s linear;
-o-animation: ayuda2 2s linear;
animation: ayuda2 2s linear;
}
#-webkit-keyframes ayuda {
0% { transform: scale(1.0);}
25% { transform: scale(1.5) rotate(-30deg)}
50% { transform: scale(1.5);}
75% { transform: scale(1.5) rotate(+30deg)}
100% { transform: scale(1.0);}
}
#-moz-keyframes ayuda {
0% { transform: scale(1.0);}
25% { transform: scale(1.5) rotate(-30deg)}
50% { transform: scale(1.5);}
75% { transform: scale(1.5) rotate(+30deg)}
100% { transform: scale(1.0);}
}
#-ms-keyframes ayuda {
0% { transform: scale(1.0);}
25% { transform: scale(1.5) rotate(-30deg)}
50% { transform: scale(1.5);}
75% { transform: scale(1.5) rotate(+30deg)}
100% { transform: scale(1.0);}
}
#-o-keyframes ayuda {
0% { transform: scale(1.0);}
25% { transform: scale(1.5) rotate(-30deg)}
50% { transform: scale(1.5);}
75% { transform: scale(1.5) rotate(+30deg)}
100% { transform: scale(1.0);}
}
#keyframes ayuda {
0% { transform: scale(1.0);}
25% { transform: scale(1.5) rotate(-30deg)}
50% { transform: scale(1.5);}
75% { transform: scale(1.5) rotate(+30deg)}
100% { transform: scale(1.0);}
}
#-webkit-keyframes ayuda2 {
0% { transform: scale(1.0);}
10% { transform: scale(1.5) }
30% { transform: scale(1.5) rotate(-90deg)}
50% { transform: scale(1.5) rotate(-180deg)}
70% { transform: scale(1.5) rotate(-270deg)}
90% { transform: scale(1.5) rotate(-360deg)}
100% { transform: scale(1.0) rotate(-360deg)}
}
#-moz-keyframes ayuda2 {
0% { transform: scale(1.0);}
10% { transform: scale(1.5) }
30% { transform: scale(1.5) rotate(-90deg)}
50% { transform: scale(1.5) rotate(-180deg)}
70% { transform: scale(1.5) rotate(-270deg)}
90% { transform: scale(1.5) rotate(-360deg)}
100% { transform: scale(1.0) rotate(-360deg)}
}
#-ms-keyframes ayuda2 {
0% { transform: scale(1.0);}
10% { transform: scale(1.5) }
30% { transform: scale(1.5) rotate(-90deg)}
50% { transform: scale(1.5) rotate(-180deg)}
70% { transform: scale(1.5) rotate(-270deg)}
90% { transform: scale(1.5) rotate(-360deg)}
100% { transform: scale(1.0) rotate(-360deg)}
}
#-o-keyframes ayuda2 {
0% { transform: scale(1.0);}
10% { transform: scale(1.5) }
30% { transform: scale(1.5) rotate(-90deg)}
50% { transform: scale(1.5) rotate(-180deg)}
70% { transform: scale(1.5) rotate(-270deg)}
90% { transform: scale(1.5) rotate(-360deg)}
100% { transform: scale(1.0) rotate(-360deg)}
}
#keyframes ayuda2 {
0% { transform: scale(1.0);}
10% { transform: scale(1.5) }
30% { transform: scale(1.5) rotate(-90deg)}
50% { transform: scale(1.5) rotate(-180deg)}
70% { transform: scale(1.5) rotate(-270deg)}
90% { transform: scale(1.5) rotate(-360deg)}
100% { transform: scale(1.0) rotate(-360deg)}
}
use this syntax for webkit
#-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
} ...
that's to say "-webkit-transform:" instead of just 'transform'
Related
I am rotating some words (for some grammar rules) and some of you already nicely helped me tighten up the thing. I would however like to speed up the animation/fade even more to avoid the words overlapping one another. Also how would I go about adding another 10 words without messing up the fade?
Here is my
HTML:
<span>The boy
<div class="rw-words rw-words-1">
<span>see<b>s</b></span>
<span>want<b>s</b></span>
<span>use<b>s</b></span>
<span>find<b>s</b></span>
<span>need<b>s</b></span>
<span>trie<b>s</b></span>
<span>love<b>s</b></span>
<span>leave<b>s</b></span>
<span>call<b>s</b></span>
<span>work<b>s</b></span>
</div><span id="girlWord">the girl.</span><br><br>
And the CSS - I have trouble understanding the animation. I understand the delays that cause the words to appear, but I don't understand where the actual fade is and which part is in/out.
./*/
ROTATING WORDS
/*/
.rw-words{
display: inline;
text-indent: 10px;
}
#girlWord {
margin-left: 4em; /* <-- Add space for the animated words */
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: auto;
color: #0f269e;
}
.rw-words-1 span{
-webkit-animation: rotateWordsFirst 20s linear infinite 0s;
-ms-animation: rotateWordsFirst 20s linear infinite 0s;
animation: rotateWordsFirst 20s linear infinite 0s;
}
}
.rw-words span:nth-child(1) {
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
color: #0f269e;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
color: #0f269e;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
color: #0f269e;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #0f269e;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
color: #0f269e;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
color: #0f269e;
}
.rw-words span:nth-child(7) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #0f269e;
}
.rw-words span:nth-child(8) {
-webkit-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
color: #0f269e;
}
.rw-words span:nth-child(9) {
-webkit-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
color: #0f269e;
}
.rw-words span:nth-child(10) {
-webkit-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
color: #0f269e;
}
}
#-webkit-keyframes rotateWordsFirst {
0% { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-ms-keyframes rotateWordsFirst {
0% { opacity: 1; -ms-animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsFirst {
0% { opacity: 1; -webkit-animation-timing-function: linear; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 0; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
#media screen and (max-width: 320px)
Here is jsfiddle.
https://jsfiddle.net/rh98fsom/
I am not an expert, but I believe you can keep adding these and just increase each one by 2 as you have above. interested to see if anyone else has some input. this part you can condense by putting them together, and now you can see where your animation fade in/out occurs:
/*enter code here*/
.rw-words span:nth-child(# ...) {
/*enter code here*/
#keyframes rotateWords {
0% {
opacity: 0 ;
}
8% {
opacity: 1 ;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
19% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
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>
I am wanting to have a gear image rotate using CSS3 webkit rotate. I have tried multiple avenues of X, Y and Z individually and collectively, as well as 2D and 3D. Any assistance would be greatly appreciated.
As you can see, it is rotating, but not at the angle that would produce a realistic rotation of a gear.
http://jsfiddle.net/carincamen/3z90g2yr/
#gear07 {
position: absolute;
left: 40%;
margin-top: 30%;
width: 100px;
height: 100px;
background-image: url(http://s18.postimg.org/3uqlngkph/gear_Lg.png);
transform: rotate(35deg);
z-index: 3;
-webkit-animation: gear07 2s infinite linear;
-moz-animation: gear07 2s infinite linear;
-o-animation: gear07 2s infinite linear;
-ms-animation: gear07 2s infinite linear;
animation: gear07 2s infinite linear;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#-webkit-keyframes gear07 {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
}
}
#-moz-keyframes gear07 {
0% {
-moz-transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-moz-transform: rotate3d(0, 0, 1, 360deg);
}
}
#-o-keyframes gear07 {
0% {
-o-transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-o-transform: rotate3d(0, 0, 1, 360deg);
}
}
#-ms-keyframes gear07 {
0% {
-ms-transform: rotate(0, 0, 1, 0deg);
}
100% {
-ms-transform: rotate(0, 0, 1, 360deg);
}
}
<div id="gear07"></div>
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 ; }