I would like to ask how to properly slow down animation in css, im making my portfolio and cant get it working..
I want to show my photo first and after that animation is done, show the welcome text, it's appearing at the same time at the moment.
I'm using unedited animate.css(can't paste it here because its too long, and im limited to 30k characters)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portfolio - Martin Mičulka</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<!-- Loading Bootstrap -->
<link href="css/vendor/bootstrap.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
<span class="sr-only">Navigace</span>
</button>
<a class="navbar-brand" href="index.html">martin mičulka</a>
</div><!--navbar-header-->
<div class="collapse navbar-collapse" id="navbar-collapse-01" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>domů</li>
<li>o mě</li>
<li>galerie</li>
<li>kontakt</li>
</ul>
</div>
</div>
</nav>
</header>
<section id="home" class="scroll-panel">
<div class="jumbotron" id="modry">
<div class="container">
<center>
<img src="img/fotka.jpg" class="img-circle animated bounceInDown" width="200px" height="200px" id="fotka" >
<div class="col-md-12">
<div class="row">
<p class="lead animated flipInX" id="welcome">Vítejte na mém portfoliu, zde budu uveřejňovat svoje dosavadní práce</p>
</div><!--row-->
</div><!--col-md-12-->
</center><!--center-->
</div><!--container-->
</div><!--jumbotron-->
</section>
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="js/vendor/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/vendor/video.js"></script>
<script src="js/flat-ui.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
</body>
</html>
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
#-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
#keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
#keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
This is my HTML of my website, im using bounceInDown and flipInX animations.
Thanks for the help ! :)
You could detect the end of the first animation and then call the second one in another function.
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
There are also some examples here: http://davidwalsh.name/css-animation-callback
Related
How make bounce effect for input placeholder? I need in bounceIn effect for my input placeholder. How animate this placeholder it? Now my animation not works.
#keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.search {
padding: 10px;
}
.search:focus::placeholder {
animation: bounceIn 2s infinite;
}
<input class="search" type="text" name="Search" value="" placeholder="Search...">
You just need to remove the ::placeholder from:
.search:focus::placeholder {
animation: bounceIn 2s infinite;
}
Also, you might find it best to not infinitely repeat the animation.
#keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.search {
padding: 10px;
}
.search:focus {
animation: bounceIn 2s infinite;
}
<h3>Click in input field to trigger animation</h3>
<input class="search" type="text" name="Search" value="" placeholder="Search...">
I have made a simple animation with a cube where it moves around the edges of a pane and am having troubles with how it rotates at each corner. For the first two corners it is fine and rotates smoothly, but for the others the cube seems to 'jump' before it moves back into position and continues moving again. For now I have just been using rotateZ() in my transforms.
I have tried playing around with things like the transform-origin, but I have not been able to find a solution myself. I am not sure what else to do as I do not know if there is a problem with the origin or if it is something like a sizing issue. I am still new to animating so please excuse any silly mistakes.
Please find the code below (HTML and CSS only so far).
.perspective {
background: gray;
background-size: 50px 50px;
height: 500px;
left: 50%;
position: absolute;
top: 50%;
width: 500px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
-webkit-transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
transform-origin: 0% 0%;
transform-style: preserve-3d;
animation: test 20s forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(25px);
background: red;
}
.cube__face--right {
transform: rotateY( 90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(25px);
background: orange;
}
#keyframes test {
0% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
}
2% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(0px) translateX(0px);
}
4% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(75px) translateX(-50px);
}
6% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(150px) translateX(0px);
}
8% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(150px) translateX(0px);
}
10% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(225px) translateX(-50px);
}
12% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(300px) translateX(0px);
}
14% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(300px) translateX(0px);
}
16% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(375px) translateX(-50px);
}
18% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
}
20% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
}
22% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(0px);
}
24% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(75px);
}
26% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(150px);
}
28% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(150px);
}
30% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(225px);
}
32% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(300px);
}
34% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(300px);
}
36% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(375px);
}
38% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
}
40% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
}
/* X */
42% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-500px);
}
44% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-425px);
}
46% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-350px);
}
48% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-350px);
}
50% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-275px);
}
52% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-200px);
}
54% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-200px);
}
56% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-125px);
}
58% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
}
60% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
}
62% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-500px) translateX(-0px);
}
64% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-500px) translateX(-0px);
}
66% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-425px) translateX(-0px);
}
68% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-350px) translateX(-0px);
}
70% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-350px) translateX(-0px);
}
72% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-275px) translateX(-0px);
}
74% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-200px) translateX(-0px);
}
76% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-200px) translateX(-0px);
}
78% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-125px) translateX(-0px);
}
80% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-50px) translateX(-0px);
}
82% {
transform: rotateZ(-360deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(0px) translateX(-0px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cube Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="perspective">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
</body>
</html>
I think the transformation origin is causing issues, since you're trying to both translate and rotate at the same time. Add an extra wrapper around your cube. Then, apply your translations to the outer div, and your rotations to your inner div.
I've simplified your example a bit for illustration, but you'll get the idea:
.perspective {
background: gray;
background-size: 50px 50px;
height: 500px;
left: 50%;
position: absolute;
top: 50%;
width: 500px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.wrapper {
width: 50px;
height: 50px;
position: relative;
transform: translate3d(0, 0, 25px);
transform-origin: 0 0 0;
transform-style: preserve-3d;
animation: translation 10s forwards;
}
.cube {
width: 50px;
height: 50px;
position: relative;
transform: rotate3d(0, 0, 0);
transform-origin: 25px 25px 0;
transform-style: preserve-3d;
animation: rotation 10s forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(25px);
background: red;
}
.cube__face--right {
transform: rotateY( 90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(25px);
background: orange;
}
#keyframes translation {
0% {
transform: translate3d(0, 0, 25px);
}
25% {
transform: translate3d(0, 450px, 25px);
}
50% {
transform: translate3d(450px, 450px, 25px);
}
75% {
transform: translate3d(450px, 0, 25px);
}
100% {
transform: translate3d(0, 0, 25px);
}
}
#keyframes rotation {
0% {
transform: rotateZ(0);
}
25% {
transform: rotateZ(90deg);
}
50% {
transform: rotateZ(180deg);
}
75% {
transform: rotateZ(270deg);
}
100% {
transform: rotateZ(360deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cube Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="perspective">
<div class="wrapper">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
</div>
</body>
</html>
You should keep the cube movements simple. I have adjusted the sides of the cube so that they are alreadyn in place without a cube transform.
Also, set the cube dimension to the seen cube dimension, and the center of movement in its center.
Then everything is easier, as can be seen in the cube animation
.perspective {
background: gray;
background-size: 50px 50px;
height: 400px;
left: 50%;
position: absolute;
top: 50%;
width: 400px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.cube {
width: 50px;
height: 50px;
position: relative;
transform-style: preserve-3d;
animation: test 20s linear forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(50px);
background: red;
}
.cube__face--right {
transform: translateZ(25px) rotateY(90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: translateZ(25px) rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: translateZ(25px) rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: translateZ(25px) rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: translateZ(25px) rotateX(-90deg) translateZ(25px);
background: orange;
}
#keyframes test {
0% {
transform: translate(0px 0px);
}
20% {
transform: translate(0px, 350px);
}
30% {
transform: translate(0px, 350px) rotateZ(-90deg);
}
45% {
transform: translate(350px, 350px) rotateZ(-90deg);
}
55% {
transform: translate(350px, 350px) rotateZ(-180deg);
}
70% {
transform: translate(350px, 0px) rotateZ(-180deg);
}
80% {
transform: translate(350px, 0px) rotateZ(-270deg);
}
90% {
transform: translate(0px, 0px) rotateZ(-270deg);
}
100% {
transform: translate(0px, 0px) rotateZ(-360deg);
}
}
<div class="perspective">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
I am working on a CSS animation that should look similar to this and I am almost there, but I don't know how to get it work correctly.
For everyone who cannot or doesn't want to view the links:
Using CSS I want an animation that transforms a three bar menu icon into an X. I can make the "bars" overlap and rotate, but the strokes are far from being symmetrical.
this is my code:
HTML:
<div class="container">
<div class="centerized">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
</div>
</div>
SCSS:
#keyframes ani1{
0% {margin-bottom: 16%;}
50% {margin-bottom: none; transform: translate(0, 20px);}
100% {margin-bottom: none; transform: rotate(30deg);}
}
#keyframes ani2{
0% {margin-bottom: 16%; opacity: 1;}
75% {margin-bottom: none; opacity: 0;}
100% {margin-bottom: none; opacity: 0;}
}
#keyframes ani3{
0% {margin-bottom: 16%;}
50% {margin-bottom: none; transform: translate(0px, -20px);}
100% {margin-bottom: none; transform: rotate(-30deg);}
}
Since I believe the fault lies within the way I positioned the elements during the animation I am including this part. To see the whole code I suggest to click on the link above.
I added the CSS's to your html to make that animation. I guess you want the effect to be on hover as in your codepen:
.You-need-this-container {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
background: #3FAF82;
color: #fff;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centerized {
width: 80px;
height: 52px;
cursor: pointer;
z-index: 50;
}
.centerized .bar1,
.centerized .bar2,
.centerized .bar3 {
height: 8px;
width: 100%;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: background-color .2s ease-in-out;
transition: background-color .2s ease-in-out;
}
.centerized .bar1 {
-webkit-animation: animate-line-1-rev .7s ease-in-out;
animation: animate-line-1-rev .7s ease-in-out;
}
.centerized .bar2 {
margin: 14px 0;
-webkit-animation: animate-line-2-rev .7s ease-in-out;
animation: animate-line-2-rev .7s ease-in-out;
}
.centerized .bar3 {
-webkit-animation: animate-line-3-rev .7s ease-in-out;
animation: animate-line-3-rev .7s ease-in-out;
}
.centerized:hover .bar1,
.centerized:hover .bar2,
.centerized:hover .bar3 {
background-color: #fff;
}
.centerized:hover .bar1,
.centerized:hover .bar2,
.centerized:hover .bar3 {
background-color: #fff;
}
.centerized:hover .bar1 {
-webkit-animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}
.centerized:hover .bar2 {
-webkit-animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}
.centerized:hover .bar3 {
-webkit-animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}
.no-animation {
-webkit-animation: none !important;
animation: none !important;
}
#-webkit-keyframes animate-line-1 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, 22px, 0) rotate(0);
transform: translate3d(0, 22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
transform: translate3d(0, 22px, 0) rotate(45deg);
}
}
#keyframes animate-line-1 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, 22px, 0) rotate(0);
transform: translate3d(0, 22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
transform: translate3d(0, 22px, 0) rotate(45deg);
}
}
#-webkit-keyframes animate-line-2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
#keyframes animate-line-2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
#-webkit-keyframes animate-line-3 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, -22px, 0) rotate(0);
transform: translate3d(0, -22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
transform: translate3d(0, -22px, 0) rotate(135deg);
}
}
#keyframes animate-line-3 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, -22px, 0) rotate(0);
transform: translate3d(0, -22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
transform: translate3d(0, -22px, 0) rotate(135deg);
}
}
#-webkit-keyframes animate-line-1-rev {
0% {
-webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
transform: translate3d(0, 22px, 0) rotate(45deg);
}
50% {
-webkit-transform: translate3d(0, 22px, 0) rotate(0);
transform: translate3d(0, 22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
#keyframes animate-line-1-rev {
0% {
-webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
transform: translate3d(0, 22px, 0) rotate(45deg);
}
50% {
-webkit-transform: translate3d(0, 22px, 0) rotate(0);
transform: translate3d(0, 22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
#-webkit-keyframes animate-line-2-rev {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
#keyframes animate-line-2-rev {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes animate-line-3-rev {
0% {
-webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
transform: translate3d(0, -22px, 0) rotate(135deg);
}
50% {
-webkit-transform: translate3d(0, -22px, 0) rotate(0);
transform: translate3d(0, -22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
#keyframes animate-line-3-rev {
0% {
-webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
transform: translate3d(0, -22px, 0) rotate(135deg);
}
50% {
-webkit-transform: translate3d(0, -22px, 0) rotate(0);
transform: translate3d(0, -22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
<div class="You-need-this-container">
<div class="container">
<div class="centerized">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
</div>
</div>
</div>
Basically I have an h2 tag that is centered but whenever I add the bounceInDown class from animate.css it makes the text in h2 not centered. I need the text in the h2 tag to stay centered while still having the bounceInDown class in use.
example of what it should look like:
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
text-align: center;
}
h2 {
display: inline-flex;
color: aquamarine;
font-family: Raleway;
opacity: .86;
font-size: 3em;
flex-direction: column;
align-items: center;
margin: 0;
position: absolute;
margin-top: 7%;
}
h2>span {
margin-left: auto;
font-size: .4em;
margin-top: -.4em;
}
#-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
#-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
#keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
<h2 class="animated bounceInDown">
Al-Saba<span>.net</span>
</h2>
Add left: 50%; transform: translateX(-50%);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
text-align: center;
}
h2 {
display: inline-flex;
color: aquamarine;
font-family: Raleway;
opacity: .86;
font-size: 3em;
flex-direction: column;
align-items: center;
margin: 0;
position: absolute;
margin-top: 7%;
left: 50%;
transform: translateX(-50%);
}
h2>span {
margin-left: auto;
font-size: .4em;
margin-top: -.4em;
}
#-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
#-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
#keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
<h2 class="animated bounceInDown">
Al-Saba<span>.net</span>
</h2>
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>