Here's my problem, I have my code here, and it works. Only thing is, I can't seem to make it work when I take away .shake:hover,.
I want the image to shake continuously, regardless if it's being hover over or not. In short, I want it to run by itself.
Here's the fiddle
CSS
body {
background-color:transparent;
}
img {
display: block;
height: 250px;
width: 250px;
}
#-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
HTML
<body>
<center>
<section class="content">
<h1></h1>
<br>
<br>
<img src="http://image.flaticon.com/teams/new/1-freepik.jpg" class="shake">
<h2 class="shake"></h2>
</section>
</center>
</body>
You need simply to remove :hover and .shake:focus, so it would look like that:
.shake {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Working fiddle: http://jsfiddle.net/fthLwct0/2
Replace
.shake:hover,
.shake:focus {
with
.shake {
Here is the fiddle :
https://jsfiddle.net/q245wpg3/1/
It would be interesting to hear which browsers you need to support. Since you are only accessing browsers which support the prefix -webkit-.
This code will work in the newest Chrome and Firefox browsers:
// Removed 'hover' and 'focus'
.shake {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
However it will not work in IE11.
If you want to support a wide variety of browser you will have no fun with animations.
So your options here are:
Look up if you can use your desired CSS at http://caniuse.com/
Use a prefixer in your workflow. You need a taskrunner like Gulp/Grunt to use a Autoprefixer: https://github.com/postcss/autoprefixer
Make use of a CSS-Library like Animate.css. Those guys will do the most work of worrying about browser supports (keep in mind that you need to look into the docs for browser support information): https://daneden.github.io/animate.css/
Hope this helps.
Regards,
Megajin
Replace the .shake:hover,.shake:focus with following css
.shake {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Related
I am a bit confused on how keyframes work exactly in this demo. Whats confusing me is that 0% and 100% are not defined but 25% and 75% are. But at 0% the 25% keyframe is active. I thought it wouldn't be active until 25% through the animation until it hits the 75% keyframe. Also when does the 75% keyframe stop 100%? If you could explain exactly what is happening it would be appreciated. I hope this question is clear. Thanks.
#-webkit-keyframes pulse {
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
25% {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
.pulse {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
width: 50px;
height: 50px;
background-color: blue;
}
.pulse:hover {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
<div class="pulse">
</div>
hi if you don't need animation to happen then add
#keyframes <animation name>
{
0%,25%
{
animation here
}
75%,100%
{
animation here
}
}
what happens here is animation don't start up-to 25%, from 25% to 75% animation plays and stops after 75% until it reaches 100%
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
I tried a lot of things but nothing is working, idk if its a transform/translateX thing or not. I tried fading and it worked, but bouncing and the translateX is not working. I am currently using brakets software and I also tried sublime test 2. Please help.
Thanks.
/*animations*/
/******************
* Bounce in right *
*******************/
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slow{
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slower{
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slowest{
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
opacity:0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
opacity:0;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
}
.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight,
.rotateInDownLeft, .rotateDownUpRight, .rollIn{
opacity:0;
}
.lightSpeedInRight, .lightSpeedInLeft{
opacity:0;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
}
/***********
* bounceIn *
************/
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
#-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz- transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
}
/****************
* bounceInRight *
****************/
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
30%{
-webkit-transform: translateX(100px)
}
60% {
-webkit-transform: translateX(-10px);
}
80% {
-webkit-transform: translateX(5px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInRight {
0% {
opacity: 1;
-moz- transform: translateX(100px);
}
30%{
-moz- transform: translateX(100px)
}
60% {
-moz-transform: translateX(-10px);
}
80% {
-moz-transform: translateX(5px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
.bounceInRight.go {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
}
You need the unprefixed properties.
So for example:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s; // unprefixed
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-duration: 1s; // unprefixed
}
Thank you for your help. I have found the answer. My html code had something wrong which was:
style='display:inline, it works on chrome but for Firefox and Safari you should use this: style='display:inline-block.
Thanks again.
At first, check your syntax. I have noticed that there are some "broken" properties, written '-moz- transform'. It should be one word.
Second, could you provide some HTML or a jsfiddle?
(I could not post it as a comment - not enough reputation to do that.)
Is there a way to get this CSS code:
/** Swing **/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
#keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
/****/
Generated from this website: https://coveloping.com/tools/css-animation-generator
To work only when hovering over an element?
I added:
.swing:hover {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
Myself and it's not working.
Oh... And I'm trying to avoid using javascript/jQuery so the page will load faster..
Demo
Use the animation-play-state:running; on :hover
so that it plays while hovering over.
Not hovered element should then be : animation-play-state:paused; so its not running without hover.
Setting the animation-iteration-count:infinite; makes the animation run infinite (as long as you hover in this case).
I have been working on an animation of a ball rolling and falling off an edge. First, I made a version which just rolls, and then stops. Working fine. But then, when I added the falling animation to the same code, it doesn't roll it, and I can't do anything about it.
Here is the first snippet:
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
then the second:
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(480px) rotate(360deg);
}
85% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
95% {
animation-timing-function: ease-out;
-webkit-transform: translate(480px, 380px);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px);
}
}
(I know it's only for safari and chrome, but I want to finish it before making it accessible in every browser)
And here is the link to the animation.
Thanks for any help!
EDIT:
It seems it wasn't exactly clear what I want it to do, so
here you can check out what the first snippet does.
A better way, seems to 'chain' the animations:
#goRight img:hover{
-webkit-animation: roll 1s, fall 1s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
#-webkit-keyframes fall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px);
}
100% {
-webkit-transform: translateX(480px) translateY(400px);
}
}
Much cleaner!
disclaimer: I'm no expert in CSS3, but after some tweaking, this seems to work... ish.
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
5% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(48px) rotate(36deg);
}
25% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(240px) rotate(180deg);
}
30% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(284px) rotate(216deg);
}
50% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px) rotate(360deg);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
}
I've created some smaller increments, to tell the engine it should animate in a certain direction; if you put 180deg half way, it seems to roll in the opposite direction.
Needs some tweaking for a smoother animation, probably.