Transition: basics, transition animations in mobile apps

What is Transition?

Transition is an animation that occurs when replacing one visual interface state with another. Unlike Property Animation (animating a single object's property), Transition manages a whole set of changes: appearance/disappearance of elements, changing their position, size and properties within a single transition. Transition solves the problem of smooth content change so that the user understands what moved where.

On mobile platforms, Transition is used in three main scenarios: navigation between screens (push, pop, modal present), fragment changes (Android FragmentTransaction) and in-screen state changes (card expansion, tab switching). Each scenario requires its own approach: navigation transitions — UIViewControllerAnimatedTransitioning in iOS or ActivityOptions in Android, in-screen transitions — Transition Framework or UIView.transition.

According to Apple HIG (2026), the duration of a standard transition should not exceed 400–500 ms — longer animations are perceived as lag. Material Design recommends 300–350 ms for mobile transitions. For large elements (cards, images), the time can increase to 500–600 ms without perceived performance loss.

Types of Transition Animations

Transition types are divided into several categories depending on which content changes and how. Basic types: cross-fade — smooth disappearance of one and appearance of another; slide — one screen moves out, another moves in; scale/zoom — an element enlarges, opening a detail screen. Combined transitions mix several effects.

Material Design rules: use one transition type within a single app to create a unified visual language. Recommended: slide for navigation between same-level screens (master → detail), cross-fade for content change within one screen (tabs, view switching), scale/zoom for transitioning from a card to a detail screen (product card → description).

Transitions in iOS (Swift)

On iOS, UIView.transition is the simplest way to animate content changes within a single View. It supports cross-dissolve, curl-up, curl-down, flip-from-left, flip-from-right. For navigation transitions between UIViewController, use UINavigationControllerDelegate with UIViewControllerAnimatedTransitioning — this gives full control over push/pop animation.

import UIKit

// UIView.transition: image change with cross-dissolve
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition completed")
}

// UIView.transition: swapping two views
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView hidden, secondView shown
}

// CATransition for layer (without Auto Layout)
let transition = CATransition()
transition.type = .push
transition.subtype = .fromRight
transition.duration = 0.35
transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
view.layer.add(transition, forKey: "pushTransition")

UIViewPropertyAnimator is a modern alternative for custom transitions on iOS 10+. Unlike UIView.transition, PropertyAnimator supports pause, cancellation and reverse animation, which is important for interactive transitions (swipe-to-go-back). For animation between UIViewControllers, use UIPercentDrivenInteractiveTransition together with PropertyAnimator — this is the standard pattern for interactive navigation.

Transitions in Android (Kotlin)

On Android, FragmentTransaction with setCustomAnimations is the main way to animate transitions between Fragments. Parameters: enter (animation for the new Fragment entering), exit (animation for the old Fragment exiting), popEnter and popExit — for back navigation. FragmentTransaction supports animation resources (R.anim) and Transition Framework (R.transition).

import androidx.fragment.app.FragmentTransaction
import androidx.transition.TransitionInflater

// FragmentTransaction with resource animations
supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,  // enter
        R.anim.slide_out_left,  // exit
        R.anim.slide_in_left,   // popEnter
        R.anim.slide_out_right  // popExit
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// FragmentTransaction with Transition Framework
val detailFragment = DetailFragment()
detailFragment.enterTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.slide_right)
detailFragment.exitTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.fade_out)

supportFragmentManager.beginTransaction()
    .replace(R.id.container, detailFragment)
    .addToBackStack(null)
    .commit()

// ActivityOptions: animation when starting an Activity
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Android best practices: Slide() — for Fragment replacement in navigation (enter = Slide(Gravity.END), exit = Slide(Gravity.START)). Fade() — for showing/hiding overlays and dialogs. Explode() — for accent transitions (deleting an item from a list). For older devices (API < 21) use R.anim resources as fallback. Transition Framework does not support SurfaceView, TextureView, GLSurfaceView — for video and camera use only R.anim animations.

Custom UIViewController Transitions in iOS

UIViewControllerAnimatedTransitioning is an iOS protocol for creating fully custom view controller transition animations. It provides access to the container view (transitionContext.containerView), the source and target views. Combined with UIPercentDrivenInteractiveTransition, this approach allows creating interactive transitions with finger scrolling.

import UIKit

"> Custom transition animator
class ScaleTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    let isPresenting: Bool

    init(presenting: Bool) { self.isPresenting = presenting }

    func transitionDuration(using ctx: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.4
    }

    func animateTransition(using ctx: UIViewControllerContextTransitioning) {
        guard let toView = ctx.view(forKey: .to),
              let fromView = ctx.view(forKey: .from)
        else { return }

        let container = ctx.containerView
        let initialScale: CGAffineTransform = CGAffineTransform(scaleX: 0.8, y: 0.8)
        let finalFrame = ctx.finalFrame(for: toView)

        if isPresenting {
            toView.transform = initialScale
            toView.alpha = 0
            toView.frame = finalFrame
            container.addSubview(toView)
        }

        UIView.animate(withDuration: transitionDuration(using: ctx),
                       delay: 0,
                       usingSpringWithDamping: 0.7,
                       initialSpringVelocity: 0.3) {
            if self.isPresenting {
                toView.transform = .identity
                toView.alpha = 1
                fromView.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
                fromView.alpha = 0
            } else {
                fromView.transform = initialScale
                fromView.alpha = 0
            }
        } completion: { _ in
            fromView.transform = .identity
            ctx.completeTransition(!ctx.transitionWasCancelled)
        }
    }
}

// Application in UINavigationControllerDelegate
extension MainViewController: UINavigationControllerDelegate {
    func navigationController(
        _ nc: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from: UIViewController, to: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        return ScaleTransitionAnimator(presenting: operation == .push)
    }
}

Interactive transitions: add a UIPanGestureRecognizer to the source screen. When the gesture triggers, create a UIPercentDrivenInteractiveTransition and call update(CGFloat(percent)). To cancel when the threshold is not reached (usually 30%), call cancel(). This pattern is used by default in UINavigationController for pop gestures and in UIScrollView with pagingEnabled. For custom gestures, implement UIViewControllerInteractiveTransitioning.

Transition Framework in Android: Scene to Scene

Transition Framework (android.transition) is a declarative animation system that automatically animates changes between two scenes (Scene). A scene is a set of Views with a specific state. When transitioning from Scene A to Scene B, Transition Framework analyzes the difference and animates: position change (ChangeBounds), size change (ChangeClipBounds, ChangeTransform), appearance (Fade) and disappearance (Fade).

import android.transition.Scene
import android.transition.TransitionManager
import android.transition.TransitionSet
import android.transition.AutoTransition
import android.transition.ChangeBounds
import android.transition.Fade

// TransitionSet: combination of ChangeBounds + Fade
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// Transition between scenes in a ViewGroup
val sceneRoot = findViewById<ViewGroup>(R.id.scene_root)
val scene1 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_initial)
val scene2 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_expanded)

"> AutoTransition without manual configuration
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — without scenes
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> Layout changes are animated automatically

ChangeBounds is the most used transition in Android, it animates View position and size changes. ChangeTransform animates rotation and scale. ChangeImageTransform — for ImageView animation (centerCrop → fitCenter). For complex transitions with hierarchy structure changes, use TransitionSet with ordering = ORDERING_SEQUENTIAL (animations execute in sequence, not in parallel). According to Android Developers (2026) documentation, Transition Framework supports all standard Views but does not support surface animation (SurfaceView, TextureView, VideoView).