How to create an infinite easing in and out CSS animation loop?


Tags: javascript,jquery,css,animation

Problem :

I want to animate the border of a popup when it is ready to receive draggable elements, i.e. has the class "accepting". I've created a finite ease-in animation, which gives the border a nice blue glowy effect. It's OK as it is, but ideally I'd like the effect to ease in and out and in again on an infinite loop while the popup has the class 'accepting'. Here be my code.

if(popup.hasClass('accepting')) {
   popup.css({
          '-webkit-transition': 'all 0.3s ease-in-out',
          'outline': 'none',
          'padding': '3px 0px 3px 3px',
          'margin': '5px 1px 3px 0px',
          'box-shadow': '0 0 5px rgba(81, 203, 238, 1)',
        })
}

I've seen some threads on here asking similar questions but the solutions involved using @webkit-keyframes selectors, and I don't think I can include additional selectors inside the .css({}) jQuery method. Is there a simpler way that I can implement here, in my JavaScript code?

Thx u - Gaweyne



Solution :

You have to use CSS animations with animation-iteration-count:infinite.
Something like:

@keyframes glow{
    100% {
        outline: none;
        padding: 3px 0 3px 3px;
        margin: 5px 1px 3px 0;
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    }
}
.glow-border {
    animation-name: glow;
    animation-duration: 0.35s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
}

Changing your code:

if(popup.hasClass('accepting')) {
   popup.addClass('glow-border');
}

Check out CSS animations docs on MDN and don't forget to prefix it.


    CSS Howto..

    How to appy font color from li:hover to inner a link text using CSS

    Fontawesome: How to control height and width of stacked icons

    How to set ID or css selector for new row added in table using javascript

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    How to evenly distribute menu items with CSS when width and quantity is not known?

    Why Does the

    tag creates a black background here? and how do I get rid from the border?

    How to get inner and outer width to a single element?

    How do you create a html scrollable area, that just uses the main browser scrollbar

    How to make a paragraph appear in a certain area in the page using Wordpress?

    How can I center vertically a div in bootstrap?

    how to use variables when setting CSS properties in Jquery?

    How does this CSS produce a circle?

    how to make edges round in CSS?

    How to use jQuery to select a class name that's transformed by css-loader?

    Rails 4 - how to write a helper method

    How to use vertical align in bootstrap

    How to reload CSS after ajax call

    WordPress - How to Disable a filter used by media.php from function.php? [closed]

    How to center text inside a div element? [duplicate]

    How to set variables in LESS from a dynamic website?

    Panel in Horizontal List item showing behind Button

    Javascript slide showing the last image 5 times

    How to create CSS-based (big) quotation marks?

    how to access anti aliasing method of a font with CSS

    how to align buttons in css/html in one line horizontally?

    How to left-align and right-align elements in one row using flexbox?

    How to style radio button or checkbox inside a bootstrap table?

    how to put 6 divs in the same line?

    How to build a simple CSS layout that expands to the viewport?

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]