The Animation On Box Hover is applied to the selected Element added to a Box, Grid Cell, or Grid Repeater Item.

animation-box-hover.gif

Enable Animation

You can do the following to trigger the Animation On Box for the selected Element.

  1. Add an Element to a Box.
  2. Select the added Element.
  3. Go to the Property Panel.
  4. Scroll down to the Animation section.
  5. Add the Hover On Box.
  6. Check the Hover On Box checkbox.

animation-box-hover-enable.png

Test Animation On Hover

You can test the Animation Effects On Box Hover by clicking the Play button near the Hover On Box checkbox in the Property Panel.

animation-box-hover-play.png

Combination With Animation on Hover

You can simultaneously apply the Animation on Box Hover and the Animation On Hover for the selected Element in a Box.

animation-hover-box-hover.gif

Animation Presets

You can use the Presets to quickly add the Animation Effects On Box Hover, including Shadow, Border, Scale, Shift, Shift Up, and Color.

animation-box-hover-presets.png

Animation For Grid Repeater

You can use the Animation Effects On Box Hover for Elements added to the Grid Repeater Items.

animation-box-hover-grid-repeater.gif

Animation Properties

Edit the properties of the Animation On Box Hover depending on the Element added to a Box, including the Duration, Color, Background, Border, Shadow, Shape, Radius, Transparency, Scale, Rotate, and Move.

animation-box-hover-properties.png

Animation Duration

Change the Duration property in the Property Panel to specify the transition time from the default to the Hover state for the selected Element in a box. The duration can be from 0 to 10 seconds.

animation-box-hover-duration.gif

The Animation On Box Hover is applied to the selected Element added to a Box, Grid Cell, or Grid Repeater Item. !animation-box-hover.gif! ## Enable Animation You can do the following to trigger the Animation On Box for the selected Element. 1. Add an Element to a Box. 2. Select the added Element. 3. Go to the Property Panel. 4. Scroll down to the Animation section. 5. Add the Hover On Box. 6. Check the Hover On Box checkbox. ## !animation-box-hover-enable.png! ## Test Animation On Hover You can test the Animation Effects On Box Hover by clicking the Play button near the Hover On Box checkbox in the Property Panel. !animation-box-hover-play.png! ## Combination With Animation on Hover You can simultaneously apply the Animation on Box Hover and the [Animation On Hover](page:197359) for the selected Element in a Box. !animation-hover-box-hover.gif! ## Animation Presets You can use the Presets to quickly add the Animation Effects On Box Hover, including Shadow, Border, Scale, Shift, Shift Up, and Color. !animation-box-hover-presets.png! ## Animation For Grid Repeater You can use the Animation Effects On Box Hover for Elements added to the Grid Repeater Items. !animation-box-hover-grid-repeater.gif! ## Animation Properties Edit the properties of the Animation On Box Hover depending on the Element added to a Box, including the **Duration, Color, Background, Border, Shadow, Shape, Radius, Transparency, Scale, Rotate**, and **Move**. !animation-box-hover-properties.png! ### Animation Duration Change the Duration property in the Property Panel to specify the transition time from the default to the Hover state for the selected Element in a box. The duration can be from 0 to 10 seconds. !animation-box-hover-duration.gif! ## Related - [Animation Run On Display](page:98657) - [Animation Sync With Scroll](page:485289) - [Animation On Hover](page:197359) - [Animation On Image Background Hover](page:204919) - [Animation Start Position](page:204913) - [Box Hover Slider Effect](page:191164) ##