How to add delay/ fade effect when changing inputs in Shiny?

I would like to add delay/ fade effects to the value, subtitle, icon and color arguments of a reactive valueBox on shinydashboard. I have no idea how to do this as I have little knowledge of Javascript, and it seems that the solutions for this require JS. Alternatives with CSS are also useful.

I tried use shinycssloaders but I didn’t like the effect it produces when the value changes from less or more than 100.

My code:

library(shiny)
library(shinydashboard)

header <- dashboardHeader()

sidebar <- dashboardSidebar(
  sidebarMenu(
    
    id = "tabs", width = 300,
    
    menuItem("Analysis", tabName = "dashboard", icon = icon("list-ol"))
    
  )
)

body <- dashboardBody(
  
  tabItems(
    
    tabItem(tabName = "dashboard", titlePanel("Analysis"), 
            
            fluidPage(
              
              column(2, 
                     
                     box(title = "Analysis", width = 75, 
                         sliderInput(
                           inputId = 'aa', label = 'AA', 
                           value = 0.5 * 100, 
                           min = 0 * 100, 
                           max = 1 * 100, 
                           step = 1
                         ), 
                         
                         sliderInput(
                           inputId = 'bb', label = 'BB', 
                           value = 0.5 * 100, 
                           min = 0 * 100, 
                           max = 1 * 100, 
                           step = 1
                         ), 
                         
                         sliderInput(
                           inputId = 'cc', label = 'CC', 
                           value = 2.5, min = 1, max = 5, step = .15
                         ), 
                         
                         sliderInput(
                           inputId = 'dd', label = 'DD', 
                           value = 2.5, min = 1, max = 5, step = .15
                         ), 
                         
                         actionButton("execute1", "Click me")
                     )
              ), 
              
              column(8, 
                     tagAppendAttributes(class = "b1", valueBoxOutput(outputId = "box1", width = 6)))
            )
    )
  )
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {
  
  ac <- function(aa, bb, cc, dd) {
    (aa + cc) + (bb + dd)
  }
  
  reac_1 <- reactive({
    tibble(
      aa = input$aa, 
      bb = input$bb, 
      cc = input$cc, 
      dd = input$dd
    )
  })
  
  pred_1 <- reactive({
    temp <- reac_1()
    ac(
      aa = input$aa, 
      bb = input$bb, 
      cc = input$cc, 
      dd = input$dd
    )
  })
  
  output$box1 <- renderValueBox({
    req(input$execute1)
    expr = isolate(valueBox(
      value = pred_1(), 
      subtitle = ifelse(test = pred_1() <= 100, 
                        "subtitle 1", "subtitle 2"), 
      icon = icon(ifelse(test = pred_1() <= 100, "smile", "angry")),  
      color = ifelse(test = pred_1() <= 100, "light-blue", "orange")
    ))
  })
  
}

shinyApp(ui, server)