CSS animations in Xway

Xway
1

A Freeway user who is starting to use Xway has asked how they can create an animation that is similar to: example_02

This example uses JavaScript, and was probably created using a Freeway Action, but a simple way to create this effect in Xway is to use CSS animations.

Here is an example of how to create a moving box in Xway:

  1. Insert a box and give it absolute position
  2. Set the width to be 10px and the height to be 50px
  3. Delete the minimum width and minimum height
  4. Set the right offset to be zero
  5. Give it a background colour
  6. Add the following properties in the Extended Properties section of the Box Inspector (don’t type [Name] or [Value] - these indicate where to enter the property name and property value): animation-duration [Name], 5s [Value], animation-iteration-count [Name], 1 [Value], animation-timing-function [Name], linear [Value], animation-name [Name], moveRight [Value]
  7. Add the following markup in the CSS Markup section of the Page Inspector:
@keyframes moveRight
{
   from { right: calc(100% - 10px) }
   to { right: 0 }
}

For more information on CSS animations, see: CSS Animations and Using CSS Animations.

1 Like
2

Many thanks Jeremy !

3

I should also have mentioned that in the moveRight calculation 10px is the width of the box. If you use a different width (step 2), replace 10px with that value.

4

Thanks Jeremy!
In Freeway I used css properties

5

“fadeOut” on img do not work with this :

Extended properties on an img :
{ animation: fadeOut 10s; }

CSS Markup section of the Page Inspector :
@keyframes fadeOut {
100% { opacity: 1; }
0% { opacity: 0; }
}

…while when I put “fadeIn” instead it works !

What do I do wrong ?
Thanks

6

Hi Drums,

Assuming that you want the image to fade out so that it becomes invisible:

  1. Set the image to have zero opacity as its default state (enter zero in the Opacity field in the Style section of the Box Inspector)
  2. Change the fadeOut function so that it starts at 1 and ends up at 0:
@keyframes fadeOut
{
   0% { opacity: 1; }
   100% { opacity: 0; }
}