How to animate an image and fade in

Support
#1

Tried to do on css but failed… i just want a image to move 10 pixels to the left and fade from white to image… how can I achieve this?

#4

Hello!

Complicated animation can be done using @keyframes. To apply it in extended theme, e.g. helium you can create separated SCSS file.

File that contains code for animation 
@mixin image-animation {
  .animated-image {
    @include animate(move-left-and-fade, 2s, linear, 1);
  }
}

@mixin animate($animation,$duration,$method,$times){
  animation: $animation $duration $method $times;
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@include keyframes(move-left-and-fade){
  0%{
    transform: translateX(60px);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100%{
    transform: translateX(0px);
    opacity: 1;
  }
}

The following mixin applies our custom animation to specific browsers:

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

The following code defines our custom animation. The move-left-and-fade is our custom name of animation.

@include keyframes(move-left-and-fade){
  0%{
    transform: translateX(60px);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100%{
    transform: translateX(0px);
    opacity: 1;
  }
}

The following mixin is not necessary, we can define animation property without it.

@mixin animate($animation,$duration,$method,$times){
  animation: $animation $duration $method $times;
}

This code includes animation to custom selector animated-image that we can assign to our image.

@mixin image-animation {
  .animated-image {
    @include animate(move-left-and-fade, 2s, linear, 1);
  }
}

And it left to include our file and mixin to the extended theme (files ext-helium.scss and image-animation.scss in the same folder):

@import "../helium/helium";
@import "image-animation";

@mixin ext-helium {
  @include helium;
  @include image-animation;
}

Image

<image id="image"
       width="200px"
       height="200px"
       stylename="animated-image"
       scaleMode="SCALE_DOWN">
    <resource>
        <url url="some_url"/>
    </resource>
</image>

The result:
animation

1 Like
#6

Excellent!!! Exactly what I needed !!! Spasibo !