Add fade transitions (fade-in and fade-out) to a video using FFmpeg and Editframe (Updated)

Published on July 3, 2023

Last updated on September 25, 2024

6 min read

Transitions are key elements of video content. Well-deployed transitions like fades in and out can make your video content much more dynamic and engaging. Using a video editor to add these simple transitions can often be time-consuming, however—especially when you are adding these elements to multiple videos in a batch.

In this quick guide, you’ll learn how to use FFmpeg and Editframe to programmatically add fade-in and fade-out transitions to your videos. Use cases for this workflow include:

Using fade transitions when stitching multiple videos together
Smoothing out transitions between intros and outros
Giving videos a more cinematic experience
Generally improving transitions in videos

Let’s get started!

Sample video file overlay (provided above)
FFmpeg(opens in a new tab): (You’ll need to install FFmpeg and set up the appropriate environment variables before beginning this tutorial)

Here is the command to add a fade in transition to a video using FFmpeg:

ffmpeg -i video.mp4 -vf "fade=t=in:st=0:d=3" -c:a copy fadein.mp4

Let’s take a look at what this command is doing.

In this line, we import the video input file:

ffmpeg -i video.mp4

Here, we add the transition fade-in effect using the video effects filter -vf. fade=t=in is the name of the transition, st=0 is the start time for the fade (0 seconds), and d=3 is the duration of the effect (3 seconds):

-vf "fade=t=in:st=0:d=3"

In this line, we copy the streams into the fadein.mp4 video file:

-c:a copy fadein.mp4

Adding a fade-out transition (FFmpeg)

Here is the command to add a fade-out transition with FFmpeg:

ffmpeg -i video.mp4 -vf "fade=t=out:st=4.06:d=3" -c:a copy fadeout.mp4

Once again, let’s step through each piece of the command.

In this line, we import the video input file:

ffmpeg -i video.mp4

Here, we add the transition fade-in effect using the video effects filter -vf. fade=t=out is the name of the transition, st=4.06 is the start time at 4.06 seconds (total video duration - fade-out effect duration) and d=3 is the duration of the effect (3 seconds).

-vf "fade=t=out:st=4.06:d=3"

In this line, we copy the streams into the fadeout.mp4 video file:

-c:a copy fadeout.mp4

Here is the output video from the FFmpeg command:

Node.js installed on your machine
No need to have FFmpeg installed on your machine
Editframe API Token (you can create an account from this link(opens in a new tab))

Let’s get started:

Setup a new Node.js project using the Editframe CLI:

npx @editframe/create@beta

Install the required dependencies:

cd add-fade-transition && npm install

Add assets to the project:

Add video.mp4 to the src/assets folder.

Update the index.html file with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/styles.css" />
    <style>
      @keyframes fade-out {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <ef-timegroup mode="sequence" class="w-[1920px] h-[1080px]">
      <ef-timegroup mode="contain">
        <ef-video
          style="animation: 3s fade-out calc(var(--ef-duration) - 3s) forwards"
          id="video"
          class="w-full h-full object-cover"
          src="/assets/video.mp4"
        ></ef-video>
      </ef-timegroup>
    </ef-timegroup>
  </body>
</html>

Let’s walk through what the code in this file is doing.

In these lines, we import the index.js file and the styles.css file which contains the styles for the video and @editframe/elements:

<head>
    <meta charset="UTF-8" />
    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

In these lines, we add fade-out CSS animation to use later on the video element:

<style>
      @keyframes fade-out {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
    </style>

In this line, we create a new video composition using the ef-timegroup element. A vertical video (9:16) with a height of 1920px and a width of 1080px:

<ef-timegroup
      mode="sequence"
      class="w-[1920px] h-[1080px]"
    >
    { /* Add elements here */ }
</ef-timegroup>

In these lines, we set a new time group with a mode of contain to add the video:

<ef-timegroup mode="contain">
        { /* Add elements here */ }
</ef-timegroup>

In these lines, we import the video element:

<ef-video
  style="animation: 3s fade-out calc(var(--ef-duration) - 3s) forwards"
  id="video"
  class="w-full h-full object-cover"
  src="/assets/video.mp4"
></ef-video>

ef-video is an Editframe element that allows you to add videos to your video composition.

Note: you can use the following code to add a fade-in transition to the video:

<ef-video
  style="animation: 3s fade-in"
  id="video"
  class="w-full h-full object-cover"
  src="/assets/video.mp4"
></ef-video>

Add the following code to the src/index.html file to create a fade-in animation: (in case you want to add a fade-in transition)

<style>
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>

Preview the project:

npx vite .

Update the .env file with your Editframe API token:

EF_TOKEN="YOUR_API_TOKEN"

Render the video:

npx @editframe/cli render .

There you go! Here is the output video using the Editframe API:

Add fade transitions (fade-in and fade-out) to a video using FFmpeg and Editframe (Updated)

Published on July 3, 2023

Last updated on September 25, 2024

6 min read

File assets

video.mp4

Part 1: Using FFmpeg

Required Tools

Adding a fade-out transition (FFmpeg)

fadein.mp4

fadeout.mp4

Part 2: Using Editframe

Required tools:

Let’s get started:

editframe-fadeout.mp4

editframe-fadein.mp4

Comparing the videos created with FFmpeg and the Editframe API

compare.mp4