<!--
{
  "availability" : [
    "iOS: 2.0.0 -",
    "iPadOS: 2.0.0 -",
    "macCatalyst: 13.1.0 -",
    "macOS: 10.5.0 -",
    "tvOS: 9.0.0 -",
    "visionOS: 1.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "QuartzCore",
  "identifier" : "/documentation/QuartzCore/CATransition",
  "metadataVersion" : "0.1.0",
  "role" : "Class",
  "symbol" : {
    "kind" : "Class",
    "modules" : [
      "Core Animation"
    ],
    "preciseIdentifier" : "c:objc(cs)CATransition"
  },
  "title" : "CATransition"
}
-->

# CATransition

An object that provides an animated transition between a layer’s states.

```
class CATransition
```

## Overview

You can transition between a layer’s states by creating and adding a [`CATransition`](/documentation/QuartzCore/CATransition) object to it. The default transition is a cross fade, but you can specify different effects from a set of predefined transitions.

The following code shows how you can transition between the two states of a [`CATextLayer`](/documentation/QuartzCore/CATextLayer) named `transitioningLayer`. When the layer is first created, its [`backgroundColor`](/documentation/QuartzCore/CALayer/backgroundColor) is set to red and its [`string`](/documentation/QuartzCore/CATextLayer/string) property is set to `Red`. When the `runTransition()` function is called, a new [`CATransition`](/documentation/QuartzCore/CATransition) object is created and added to `transitioningLayer`, and the state of the layer is changed so that its background color is blue and its rendered text reads `Blue`.

The end result is that the push transition animates the red state from left to right with the blue state entering the scene from the left.

```swift
let transitioningLayer = CATextLayer()
     
override func viewDidLoad() {
    super.viewDidLoad()
    transitioningLayer.frame = CGRect(x: 10, y: 10,
                                      width: 320, height: 160)
    
    view.layer.addSublayer(transitioningLayer)
    
    // Initial "red" state
    transitioningLayer.backgroundColor = UIColor.red.cgColor
    transitioningLayer.string = "Red"
}
      
   
func runTransition() {
    let transition = CATransition()
    transition.duration = 2
    
    transition.type = kCATransitionPush
    
    transitioningLayer.add(transition,
                           forKey: "transition")
    
    // Transition to "blue" state
    transitioningLayer.backgroundColor = UIColor.blue.cgColor
    transitioningLayer.string = "Blue"
}
```

## Topics

### Transition start and end point

[`startProgress`](/documentation/QuartzCore/CATransition/startProgress)

Indicates the start point of the receiver as a fraction of the entire transition.

[`endProgress`](/documentation/QuartzCore/CATransition/endProgress)

Indicates the end point of the receiver as a fraction of the entire transition.

### Transition Properties

[`type`](/documentation/QuartzCore/CATransition/type)

Specifies the predefined transition type.

[`subtype`](/documentation/QuartzCore/CATransition/subtype)

Specifies an optional subtype that indicates the direction for the predefined motion-based transitions.

### Custom transition filter

[`filter`](/documentation/QuartzCore/CATransition/filter)

An optional Core Image filter object that provides the transition.

### Constants

[Common Transition Types](/documentation/QuartzCore/common-transition-types)

These constants specify the transition types that can be used with the [`type`](/documentation/QuartzCore/CATransition/type) property.

[Common Transition Subtypes](/documentation/QuartzCore/common-transition-subtypes)

These constants specify the direction of motion-based transitions. They are used with the [`subtype`](/documentation/QuartzCore/CATransition/subtype) property.


---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)