HTMLPLUS

Transition

This component allows you to apply an animation on your component such as fade or other animations. click here to see and choose your favorite animation from a wide range of animation we provide for you.

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusTransition

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
delay
Type
stringstring
Default
'0s'
Specifies the amount of delay before starting the animation to play.
This may be specified in either seconds s or milliseconds ms.
Name
direction
Type
"alternate" | "alternate-reverse" | "normal" | "reverse""alternate" | "alternate-reverse" | "normal" | "reverse"
Default
'normal'
Defines whether an animation should be played forwards, backwards or in alternate cycles.
Name
duration
Type
stringstring
Default
'normal'
Specifies the length of time it will take to complete one cycle between two defined states. You can also use the reservation values slower, slow, normal, fast and faster.
Name
name
Type
stringstring
Default
undefined
Specifies what kind of animation you want to play.
click here to see the list of available animations.
Name
repeat
Type
"infinite" | number"infinite" | number
Default
1
Specifies the number of times the animation should be repeated after one complete cycle.
Name
onCancel
This event is fired any time the animation has been canceled.
Value
void
Name
onEnd
This event is fired when animation has been completed.
Value
void
Name
onIteration
This event is fired any time a new cycle has been started.
Value
void
Name
onStart
This event is fired when animation has been started.
Value
void
Name
--plus-transition-delay
TODO
Name
--plus-transition-direction
TODO
Name
--plus-transition-duration
TODO
Name
--plus-transition-repeat
TODO

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Transition } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <Transition name="fade-in" repeat="infinite">
        HTMLPLUS
      </Transition>      
    </div>    
  </>;
};

export default App;
.center {
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Transition } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="evenly" gutter="md">      
      <Grid.Item xs="12" sm="auto">        
        <Transition name="fade-in" repeat="infinite">
          HTMLPLUS
        </Transition>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="auto">        
        <Transition name="fade-out" repeat="infinite">
          HTMLPLUS
        </Transition>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid-item {
  text-align: center;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Transition } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="evenly" gutter="md">      
      <Grid.Item xs="12" sm="6" md="4" xl="auto">        
        <Transition name="fade-in" repeat="infinite" duration="slower">
          HTMLPLUS
        </Transition>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6" md="4" xl="auto">        
        <Transition name="fade-in" repeat="infinite" duration="slow">
          HTMLPLUS
        </Transition>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6" md="4" xl="auto">        
        <Transition name="fade-in" repeat="infinite" duration="normal">
          HTMLPLUS
        </Transition>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6" md="4" xl="auto">        
        <Transition name="fade-in" repeat="infinite" duration="fast">
          HTMLPLUS
        </Transition>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6" md="4" xl="auto">        
        <Transition name="fade-in" repeat="infinite" duration="faster">
          HTMLPLUS
        </Transition>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="6" md="4" xl="auto">        
        <Transition name="fade-in" repeat="infinite" duration="2.5s">
          HTMLPLUS
        </Transition>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-grid-item {
  text-align: center;
}
Contributors
Prev
Tooltip
Next
Code Of Conduct
SELECT YOUR FRAMEWORK
React logo
React