Menu
I'm trying to learn HTML and CSS but I have encountered a problem:
<style style="text/css"> div.slide-slow { width: 100%; overflow: hidden; } div.slide-slow div.inner { animation: slide-slow 30s; margin-top: 0%; } @keyframes slide-slow { from { margin-left: 100%; } to { margin-left: 0%; } } </style> <div class="slide-slow"> <div class="inner"> <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish"> </div> </div> I want this CSS to loop and not just stop when it is done. Is it possible to make a CSS function to loop?
577
To create infinite animations in CSS, we will use the property animation-iteration-count: infinite;.
You can also specify the number of animation iterations using the animation shorthand CSS property to use fewer lines of code. For example, in the following code: animation: example 3s 2s 5 ease; … the value 5 sets the number of animation iterations.
Looping is a property of the GIF itself. The best way to do this would be to modify the GIF to allow the animation to endlessly loop. Most image editors which accept GIF animations have a "Loop" option which can be set to true.
The animation-iteration-count property in CSS is used to specify the number of times the animation will be repeated. It can specify as infinite to repeat the animation indefinitely.
Use animation-iteration-count: infinite. Limit the loop with a number value.
<style style="text/css"> div.slide-slow { width: 100%; overflow: hidden; } div.slide-slow div.inner { animation: slide-slow 3s; margin-top: 0%; animation-iteration-count: infinite; } @keyframes slide-slow { from { margin-left: 100%; } to { margin-left: 0%; } } </style> <div class="slide-slow"> <div class="inner"> <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish"> </div> </div>Additional: For Ismael's suggestion to achieve back and forth animation with a flip effect, you can make use of rotateY(180deg). Contrary to flip at a static place/position, it is better to rotate the fish as if it is moving with the flow of water current to backwards(normal animation). ease-in-out can help maintaining the timing function better. I have used width: 40vw for the rotate function to slightly be responsive/view port dependent and not rotate with too much offset.
Play around with the margin and width values to achieve suitable animation.
<style style="text/css"> * { margin: 0; padding: 0; } div.slide-slow { width: 100%; overflow: hidden; } div.slide-slow div.inner { animation: slide-slow 15s; margin-top: 0%; animation-iteration-count: infinite; animation-delay: 0s; width: 40vw; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes slide-slow { 0% { margin-left: 85%; } 25% { margin-left: 20%; transform: rotateY(0deg); } 50% { margin-left: -25%; transform: rotateY(180deg); transform-origin: center center; } 75% { margin-left: 50%; transform: rotateY(180deg); } 100% { margin-left: 85%; transform: rotateY(0deg); } } </style> <div class="slide-slow"> <div class="inner"> <img src="http://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish"> </div> </div>(image source: http://www.html.am/images/html-codes/marquees/fish-swimming.gif)
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
