Okay
  Public Ticket #1014953
Animation of a layer with a animation css class
Closed

Comments

  •  2
    Guilhem started the conversation

    Hi,

    is it possible to animate a layer within a slide with a regular animation css class ? I have a layer that work ok for the transition IN but I want to animate it after it display.

    for example the html code is :

    <img src="img/zguegoo-arm.png" class="ls-layer" class="swing-arm" data-ls="offsetxin: left; rotatein: 90;" style="position:relative; top:70%; left:1475px;">

    and the animation class linked in the css is :

    .swing-arm {
        
      -webkit-animation-duration: 2s;
      -webkit-animation-name: swing-arm;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      -webkit-transform-origin: 110px 5px;
      animation-duration: 2s;
      animation-name: swing-arm;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: 110px 5px;
    }

    @-webkit-keyframes swing-arm {
      0%   {-webkit-transform: rotate(0deg); }
      100% {-webkit-transform: rotate(50deg); }
     
     }

    @keyframes swing-arm {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(50deg); }
     
     }
        
    }

    but it does not animate once displayed. Any clue about this ? 

    Thanks a lot,

    Guilhem


  • [deleted] replied

    Hey Guilhem,

    You do not have to use custom CSS to achieve this animation, you can use the plugin's built-in options instead.
    You can set up an infinite loop (middle) transition with rotate for to layer for the same effect.