Add support for CSS 3 animations & transitions

This feature will allow adding animations directly through CSS code. Currently adding animations is possible only with JS(TypeScript) code. Making this feature available will separate the animation logic from the application one and the process of adding new animations will be easier. Moreover, it will be theoretically easy to use existing CSS3 animation libraries (e.g. animate.css). Adding support for CSS pseudo selectors will streamline the process of triggering animations by adding visual states (e.g. button1:highlighted).

In order to add initial support for CSS animations, the following CSS properties should be supported:

The following animation properties could be implemented at later stages:

animation-direction
animation-fill-mode

In addition to animation properties, the following CSS property should be supported:

transform

Currently only the following properties are animatable in {N}:

Example:

.button1 {
    background-color: white;
}

.button1:highlighted {
    animation-duration: 0.75s;
    animation-name: test;
}

@keyframes test {
from { background-color: red; }
  to { background-color: white; }
}

CSS animations can be improved further by implementing #1894 and #1895

+1

Implement richer item/screen transitions (CSS) #1767

The following animation:

@keyframes intro-logo-bg-enter {
    from {
        transform: scale(10, 10);
    }
    to {
        transform: translate(0, -40);
    }
}
#intro-logo-bg {
    animation-name: intro-logo-bg-enter;
    animation-duration: 3;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

Must leave the object after the animation scaled 1, 1 and translated 40 pixels down.
Currently it animates it properly but at the end the object jumps to scale 10 10 and probably 40 pixels down.

P.S> The following works like a charm:

@keyframes intro-logo-bg-enter {
    from {
        transform: scale(10, 10), translate(0, 0);
    }
    to {
        transform: scale(1,1), translate(0, -40);
    }
}

Consider allowing multiple animations to be chained using the animation: shorthand property, such as:

@keyframes anim1 {
    from {
         background-color: green;
    }
    to {
         background-color: red;
    }
}
@keyframes anim2 {
    from {
        background-color: red;
    }
    to {
         background-color: green;
    }
}
div#myDiv {
    animation: anim1 2s ease-out, anim2 3s ease-in 2s forwards;
}

Consider supporting timing functions per keyframe:

@keyframes mymove {
    0% {
        transform: translate(0px, 0px);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translate(0, 100px);
        animation-timing-function: ease-in;
    }
    100% { transform: translate(0, 200px); }
}

Support ease timing function. (It is also the Default)
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

QUOTE: ease: Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))

Samples: https://github.com/NativeScript/animation-demo/tree/release/app/css-animations

Does this support motion-path? http://caniuse.com/#feat=css-motion-paths

Currently not. However, this is an interesting feature. You can add a feature request for this.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Navigation Menu

Repository navigation

Add support for CSS 3 animations & transitions #1608

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Add support for CSS 3 animations & transitions #1608

Description

Activity

mikeres0 commented on Feb 29, 2016

myninka commented on Mar 15, 2016

PanayotCankov commented on Mar 17, 2016

PanayotCankov commented on Mar 17, 2016

PanayotCankov commented on Mar 17, 2016

PanayotCankov commented on Mar 23, 2016

vchimev commented on Apr 5, 2016

stevetayloruk commented on Apr 28, 2016

tzraikov commented on Apr 28, 2016

lock commented on Aug 29, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions