Geek Answers Handbook

How to pause in the middle of an animation / transition

I have an image that I want to stretch for 3 seconds, then pause for 2 seconds and then not stretch for 3 seconds. Be that as it may, I do not know how to do this; Animation delay only works at the beginning of the animation, not in the middle. Here is my code:

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Page 2</title> <style type="text/css"> /* Your styles go here */ img { width:200px; height:100px; animation: widthChange 6s; -webkit-animation: widthChange 6s; -moz-animation: widthChange 6s; -0-animation: widthChange 6s; } p {text-align:center} button {margin:20px} .stylized { font-style: italic; border-width: 5px; border-color: yellow; border-style: outset; } @-webkit-keyframes widthChange { 0%, 100% {width: 200px;} 50% {width: 400px;} } @-o-keyframes widthChange { 0%, 100% {width: 200px;} 50% {width: 400px;} } @-moz-keyframes widthChange { 0%, 100% {width: 200px;} 50% {width: 400px;} } @keyframes widthChange { 0%, 100% {width: 200px;} 50% {width: 400px;} } </style> <script src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // jQuery methods go here... $(document).ready(function() { $('img').addClass("loaded"); $('img').addClass("loaded2"); $("#button1").click(function() { $("button").addClass("stylized"); $("#button1").html("Fancy Button 1"); $("#button2").html("Fancy Button 2"); $("#button3").html("Fancy Button 3"); }); }); }); /* Your additional JavaScript goes here */ </script> </head> <body> <img class = "image" src="elephant.jpg" alt="elephant"/> <p><button id="button1">Button 1</button><button id="button2">Button 2</button><button id="button3">Button 3</button></p> </body> </html>
+7
javascript jquery html css animation
source share
2 answers

Try something like this. If you add a pause time to the total time (to get 8 seconds instead of 6), then calculate the period of time that the element should be static (3/8 + 2/8, where 2/8 pause time is 2 seconds), and then, so that the end of the element returns to the default width (another 3/8 of the total time), you must pause 2 seconds between them.

I used only default animation and @keyframes here. You can copy this code to other browser versions for compatibility.

 animation: widthChange 8s; @keyframes widthChange { 0% {width: 200px;} 37.5% {width: 400px;} 62.5% {width: 400px;} 100% {width: 200px;} }

A stripped down example: http://jsfiddle.net/IronFlare/pjnk6z6f/

+5
source share

You can do this by adding additional key frames, for example:

https://jsfiddle.net/kh3qa3L6/

For example:

 @-webkit-keyframes widthChange { 0%, 100% { width: 200px; } 25% { width: 400px; } 75% { width: 400px; } }
+3
source share

More articles:


All Articles