In autoplay mode, the speed of sliding is irregular

[ankitjangir01]

Describe the bug I was using autoPlay mode of the slides and changed the customTransition as all 10s linear. There carousel was sliding automatically as expected but with irregular speed. Firstly, it slides gently and till the end, the speed gradually increases.

Full Code

import React from 'react'
import Carousel from 'react-multi-carousel'
import "react-multi-carousel/lib/styles.css"

const SkillsCarousel = () => {
    return (
        <Carousel
            additionalTransfrom={0}
            arrows
            autoPlay
            autoPlaySpeed={1}
            centerMode={false}
            className=""
            containerClass="container-with-dots"
            customTransition="all 10s linear"
            dotListClass=""
            draggable
            focusOnSelect={false}
            infinite
            itemClass=""
            keyBoardControl
            minimumTouchDrag={80}
            pauseOnHover
            renderArrowsWhenDisabled={false}
            renderButtonGroupOutside={false}
            renderDotsOutside={false}
            responsive={{
                desktop: {
                    breakpoint: {
                        max: 3000,
                        min: 1024
                    },
                    items: 3,
                    partialVisibilityGutter: 40
                },
                mobile: {
                    breakpoint: {
                        max: 464,
                        min: 0
                    },
                    items: 1,
                    partialVisibilityGutter: 30
                },
                tablet: {
                    breakpoint: {
                        max: 1024,
                        min: 464
                    },
                    items: 2,
                    partialVisibilityGutter: 30
                }
            }}
            rewind={false}
            rewindWithAnimation={false}
            rtl={false}
            shouldResetAutoplay
            showDots={false}
            sliderClass=""
            slidesToSlide={2}
            swipeable
            transitionDuration={1000}
        >
            <div>
                <h1>First heading</h1>
            </div>
            <div>
                <h1>Second heading</h1>
            </div>
            <div>
                <h1>Third heading</h1>
            </div>
            <div>
                <h1>Fourth heading</h1>
            </div>
            <div>
                <h1>Fifth heading</h1>
            </div>
        </Carousel>
    )
}

export default SkillsCarousel

Suspicious Code In the styles.css file, my IDE is highlighting a part of the code in red color. I'm not sure whether it is related to the issue or not, even whether it is a bug or not, but perhaps, it is something to be considered by you.

See background in following class-