- Qt 6.11
- Qt Labs StyleKit
- QML Types
- StyleAnimation
- Qt 6.11.1 Reference Documentation

# StyleAnimation QML Type

A convenience type for animating style properties. More...

Import Statement: | `import Qt.labs.StyleKit`
Inherits: | ParallelAnimation

- List of all members, including inherited members

## Properties

- animateBackgroundBorder : bool
- animateBackgroundColors : bool
- animateBackgroundGeometry : bool
- animateBackgroundRadii : bool
- animateBackgroundScaleAndRotation : bool
- animateBackgroundShadow : bool
- animateColors : bool
- animateControlGeometry : bool
- animateHandleBorder : bool
- animateHandleColors : bool
- animateHandleGeometry : bool
- animateHandleRadii : bool
- animateHandleScaleAndRotation : bool
- animateHandleShadow : bool
- animateIndicatorBorder : bool
- animateIndicatorColors : bool
- animateIndicatorGeometry : bool
- animateIndicatorRadii : bool
- animateIndicatorScaleAndRotation : bool
- animateIndicatorShadow : bool
- duration : int
- easing : EasingCurve

## Detailed Description

StyleAnimation is an Animation that animates style properties when a control changes state. For example, setting animateBackgroundColors to `true` will animate all color properties of the background, such as background.color, background.border.color, background.image.color, and background.shadow.color. It is used inside a transition:

     comboBox {
         background.color: "lightgray"
         hovered.background.color: "plum"

         indicator.color: "white"
         hovered.indicator.color: "pink"
         hovered.indicator.border.width: 4

         transition: Transition {
             StyleAnimation {
                 animateBackgroundColors: true
                 animateIndicatorColors: true
                 animateIndicatorBorder: true
                 easing.type: Easing.OutQuad
                 duration: 500
             }
         }
     }

StyleAnimation is just a convenience Animation that handles listing the affected style properties automatically. The snippet above could also be written as:

     checkBox {
         background.color: "lightgray"
         hovered.background.color: "plum"

         indicator.color: "white"
         hovered.indicator.color: "pink"
         hovered.indicator.border.width: 4

         transition: Transition {
             ColorAnimation {
                 properties: "background.color, background.border.color, background.image.color, background.shadow.color"
                 + ", indicator.color, indicator.border.color, indicator.image.color, indicator.shadow.color"
                 easing.type: Easing.OutQuad
                 duration: 500
             }
             NumberAnimation {
                 properties: "indicator.border.width"
                 easing.type: Easing.OutQuad
                 duration: 500
             }
         }
     }

A StyleAnimation can also be used together with other animations:

     slider {
         handle.color: "white"
         hovered.handle.color: "seagreen"
         hovered.handle.border.width: 8

         transition: Transition {
             StyleAnimation {
                 animateHandleColors: true
                 easing.type: Easing.OutQuad
                 duration: 500
             }
             NumberAnimation {
                 properties: "handle.border.width"
                 easing.type: Easing.OutBounce
                 duration: 1000
             }
         }
     }

Note: Types in Qt.labs modules are not guaranteed to remain compatible in future versions.

See also ControlStyle.transition and ControlStyle.

## Property Documentation

### animateBackgroundBorder : bool

When `true`, animates the border width of the background delegate.

### animateBackgroundColors : bool

When `true`, animates the color properties of the background delegate, including border and shadow colors.

See also animateColors and animateBackgroundGeometry.

### animateBackgroundGeometry : bool

When `true`, animates the geometry properties of the background delegate, such as implicit size and margins.

### animateBackgroundRadii : bool

When `true`, animates the corner radii of the background delegate.

### animateBackgroundScaleAndRotation : bool

When `true`, animates the and rotation of the background delegate.

### animateBackgroundShadow : bool

When `true`, animates the shadow properties of the background delegate, such as vertical offset, horizontal offset, scale, and blur. The shadow color is animated by animateHandleColors.

### animateColors : bool

When `true`, animates all color properties across all delegates. This is a shorthand for enabling animateBackgroundColors, animateHandleColors, and animateIndicatorColors at once.

Note that ColorAnimation also animates all color properties that change during a transition when property and properties are both left unset. This makes it a an alternative to StyleAnimation when only colors need to be animated.

See also animateBackgroundColors, animateHandleColors, and animateIndicatorColors.

### animateControlGeometry : bool

When `true`, animates the control's geometry properties, such as spacing and padding.

### animateHandleBorder : bool

When `true`, animates the border width of the handle delegate and its sub-handles.

### animateHandleColors : bool

When `true`, animates the color properties of the handle delegate and its sub-handles, including border and shadow colors.

See also animateColors and animateHandleGeometry.

### animateHandleGeometry : bool

When `true`, animates the geometry properties of the handle delegate and its sub-handles, such as implicit size and margins.

### animateHandleRadii : bool

When `true`, animates the corner radii of the handle delegate and its sub-handles.

### animateHandleScaleAndRotation : bool

When `true`, animates the scale and rotation of the handle delegate and its sub-handles.

### animateHandleShadow : bool

When `true`, animates the shadow properties of the handle delegate and its sub-handles, such as vertical offset, horizontal offset, scale, and blur. The shadow color is animated by animateHandleColors.

### animateIndicatorBorder : bool

When `true`, animates the border width of the indicator delegate and its sub-indicators.

### animateIndicatorColors : bool

When `true`, animates the color properties of the indicator delegate and its sub-indicators, including border and shadow colors.

See also animateColors and animateIndicatorGeometry.

### animateIndicatorGeometry : bool

When `true`, animates the geometry properties of the indicator delegate and its sub-indicators, such as implicit size and margins.

### animateIndicatorRadii : bool

When `true`, animates the corner radii of the indicator delegate and its sub-indicators.

### animateIndicatorScaleAndRotation : bool

When `true`, animates the scale and rotation of the indicator delegate and its sub-indicators.

### animateIndicatorShadow : bool

When `true`, animates the shadow properties of the indicator delegate and its sub-indicators, such as vertical offset, horizontal offset, scale, and blur. The shadow color is animated by animateHandleColors.

### duration : int

The duration in milliseconds of the animation.

See also easing and PropertyAnimation.

### easing : EasingCurve

The easing curve applied to the animation.

See also duration and PropertyAnimation.