I'm using animate.css for a CSS3 shake effect, the CSS looks like the snippet below. Right now it shakes back and forth multiple times and I'd like to cut the shakes in half. Is there a way to do this with animate css3 or do I need to modify the css3 below? If so, what's the best way?
#-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
#keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
Not really sure how you want to "cut the shake in half". Do you mean the speed, sway??
Here is what I came up, demo
If you want to slow the animation down, change the `-webkit-animation-duration:
Here is a custom cool shake/wobble effect:
#keyframes shake {
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)
}
}
Here is a simple demo
Related
I am trying to make the button shake without hovering on it. When I am removing the "hover" element, the button doesn't shake at all. What should I change in the code to make it work?
.first_button:hover {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<button class="first_button">Button</button>
Use the infinite prop for your animation.
More info on animation syntax
.first_button {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<button class="first_button">Button</button>
This is my code for CSS3 animation: shake that I applied on one of the nav links. It works like a charm, but I want it turned off when someone opens the page that it is linked to it.
How can I solve this problem?
#menu-item-313 {
animation: shake 1.4s;
-webkit-animation-iteration-count: 10; /* Chrome, Safari, Opera */
animation-iteration-count: 6;
transform: translate3d(0, 0, 0);
}
#keyframes shake {
10%, 90% {
transform: translate3d(-2px, 0, 0);
}
20%, 80% {
transform: translate3d(4px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-8px, 0, 0);
}
40%, 60% {
transform: translate3d(8px, 0, 0);
}
}
One way is to set a class on the body, like this, and use the :not selector
Sample not shaking
body:not(.pg313) #menu-item-313 {
animation: shake 1.4s;
-webkit-animation-iteration-count: 10; /* Chrome, Safari, Opera */
animation-iteration-count: 6;
transform: translate3d(0, 0, 0);
}
#keyframes shake {
10%, 90% {
transform: translate3d(-2px, 0, 0);
}
20%, 80% {
transform: translate3d(4px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-8px, 0, 0);
}
40%, 60% {
transform: translate3d(8px, 0, 0);
}
}
<body class="pg313">
<div id="menu-item-313">
Menu item 313
</div>
<div id="menu-item-314">
Menu item 314
</div>
</body>
Sample shaking
body:not(.pg313) #menu-item-313 {
animation: shake 1.4s;
-webkit-animation-iteration-count: 10; /* Chrome, Safari, Opera */
animation-iteration-count: 6;
transform: translate3d(0, 0, 0);
}
#keyframes shake {
10%, 90% {
transform: translate3d(-2px, 0, 0);
}
20%, 80% {
transform: translate3d(4px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-8px, 0, 0);
}
40%, 60% {
transform: translate3d(8px, 0, 0);
}
}
<body class="pg314">
<div id="menu-item-313">
Menu item 313
</div>
<div id="menu-item-314">
Menu item 314
</div>
</body>
I'm working on an HTML5 game which has an object that needs to start centered, move to the left out of view and then appear from the right to complete and repeat.
#-webkit-keyframes marquee {
0% { transform: translate3d(-50%, 0, 0); }
50% { transform: translate3d(-100vw, 0, 0); }
75% { transform: translate3d(100vw, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
#-moz-keyframes marquee {
0% { transform: translate3d(-50%, 0, 0); }
50% { transform: translate3d(-100vw, 0, 0); }
75% { transform: translate3d(100vw, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
#-ms-keyframes marquee {
0% { transform: translate3d(-50%, 0, 0); }
50% { transform: translate3d(-100vw, 0, 0); }
75% { transform: translate3d(100vw, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
#keyframes marquee {
0% { transform: translate3d(-50%, 0, 0); }
50% { transform: translate3d(-100vw, 0, 0); }
75% { transform: translate3d(100vw, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
div {
width: 200px;
height: 50px;
background: red;
position: absolute;
left: 50%;
top: 15px;
transform: translate3d(-50%, 0, 0);
animation: marquee 5s linear infinite;
}
http://jsfiddle.net/gRoberts/0esr1abL/
I've created a simple fiddle which shows what I am trying to do, however you'll notice that once it reaches the left, it zips to the right and then carries on. I've tried getting around this by using opacity, however this causes undesired effects (object fades in/out.)
I have the following working now, however the object starts off screen, which isn't ideal:
#-webkit-keyframes marquee {
0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
#-moz-keyframes marquee {
0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
#-ms-keyframes marquee {
0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
#keyframes marquee {
0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
div {
width: 200px;
height: 50px;
background: red;
position: absolute;
top: 15px;
animation: marquee 5s linear infinite;
}
http://jsfiddle.net/gRoberts/rr969j09/
Any suggestions on to get the above fiddle working but starting from the center?
You can use the first snippet from the question but change the opacity immediately (within .1% of the animation duration). Changing the opacity from 1 to 0 between 50% and 50.1% would make the element get hidden abruptly and not show up as it goes from the left to the right. Similarly changing the opacity back to 1 at 75.1% would make it visible when it comes back into view from the right.
Initially when you had tried, I think you may have changed the opacity at a higher interval and thus making it give a fade-in/out like appearance.
The animation was speeding up and slowing down because for the first 50% it was going from centre to left (-100vw) but it was taking only 25% of the time to come back in from the right to centre. I have modified this to allocate equal splits (that is, center to left from 0-45% and from right to centre between 55-100%) and this makes it look more smoother. It could be tuned further but I think you get the idea.
#keyframes marquee {
0% {
transform: translate3d(-50%, 0, 0);
}
45% {
transform: translate3d(-100vw, 0, 0);
opacity: 1;
}
45.1% {
opacity: 0; /* at this point in time the element is fully on the left and hidden */
}
55% {
transform: translate3d(100vw, 0, 0);
opacity: 0; /* at this point in time the element is fully on the right but still hidden */
}
55.1% {
opacity: 1; /* now we make it visible again so that it can come back into view */
}
100% {
transform: translate3d(-50%, 0, 0);
}
}
div {
width: 200px;
height: 50px;
background: red;
position: absolute;
left: 50%;
top: 15px;
animation: marquee 5s linear infinite;
}
body {
overflow: hidden;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
I am trying to make image shake on hover with CSS3 but seems like I have syntax error. I am trying the apply the effect to css3.png and html5.png
I have added id classes to the images that I would like to have that effect.
Here is my current html:
<div class="row">
<div class="col-lg-2 col-lg-offset-2">
<div id="img">
<img class="img-responsive shake" src="img/html5.png">
</div>
</div>
<div class="col-lg-3">
<img class="img-responsive" src="img/and.png">
</div>
<div class="col-lg-2">
<div id="img">
<img class="img-responsive shake" src="img/css3.png">
</div>
</div>
</div>
here is the CSS:
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
#-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
#keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
To get the effect on hover, you have to include the :hover selector in your css: http://www.w3schools.com/cssref/sel_hover.asp
.shake img:hover {
***code***
}
Try replacing
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
with this CSS.
.shake:hover {
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
Your problem is that .shake is calling a div that you are not using in your HTML. First, take the spaces out of your div classes, it is bad naming convention... Then call those divs instead of ".shake" It would be closer to this
# .img-responsive-shake{
enter code here
}
I have This CSS3 animate code for shake effect in DIV action: (i copy this code from HERE)
CSS CODE:
.shake {
-webkit-animation-name: shake ;
animation-name: shake;
}
#-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
#keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
Now, in action when i see div shake action not work!?
for see css effect, How do can i fix this ?
DEMO
The animated class is missing. Take a look here to find more information on how Animate.css works. You actually do not need to copy the code. You can include the library into the header of your document.
#-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
#keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
/* add this class */
.animated {
-webkit-animation-duration:1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.shake {
-webkit-animation-name: shake;
animation-name: shake
}
<div class="animated shake">Shake this text</div>
Working, your missing the animation-duration: 4s;
#-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
#keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
animation-duration: 4s;
}
Fiddle: http://jsfiddle.net/pjra0sqk/2/
It is becuase you didn't give animation-duration: 1s;
Just give it solved your issue.
.shake {
-webkit-animation-name: shake;
animation-name: shake;
animation-duration: 1s;
-webkit-animation-duration:1s;
}
Check your updated Fiddle.
General Code snippet to make a div shake. If anyone is still interested:
#myDiv {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
/* Some additional styles for a better example */
background-color: #00ccff;
color: white;
text-align: center;
height: 200px;
width: 200px;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
<div id="myDiv">Content of shaking div</div>
</body>
</html>