Why this css animation is using too much CPU?-CodePudding

The animation below is firing up the cpu to the limit each time I open it. It basically has 3 hero slides with zoom-in and fade-in animations. I have 2 questions:

Why it's bogging the CPU that much and what is the fix for that?
The animation is working in Firefox perfectly fine, but it's not working in Safari properly. There are a lot of glitches, incorrect fading changes etc. Why it's not working in Safari and how can I fix it.

Thanks for answers in advance.

*{
    margin:0;
    padding:0;
    transition: all 0.3s ease;
}

body {
    background: #333;
    color: #ccc;
    position: relative;
}

.slide {
    border: 2px solid #555;
    height: 100vh;
    width: 100%;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    animation: fade 31s linear infinite;
    -webkit-animation: fade 31s linear infinite;
}

..slide:nth-child(1),
.slide img:nth-child(1) {
    animation-delay: 0s;
}

.slide:nth-child(2),
.slide img:nth-child(2) {
    animation-delay: 10s;
}

.slide:nth-child(3),
.slide img:nth-child(3) {
    animation-delay: 20s;
}

.slide img {
    /* object-fit: cover; */
    height: 100%;
    width: 100%;
    animation: zoom 31s linear infinite;
    -webkit-animation: zoom 31s linear infinite;
}

.slide .text {
    margin: 0.3rem;
    padding: 1.5rem;
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    width: 50%;
    top: 50%;
    border-radius: 1rem;
}

@keyframes fade {
    25% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
}

@keyframes zoom {
    from {
        transform: scale(1.0)
    }
    to {
        transform: scale(1.3)
    }
}
@-webkit-keyframes fade {
    25% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
}

@-webkit-keyframes zoom {
    from {
        transform: scale(1.0)
    }
    to {
        transform: scale(1.3)
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div >
            <img src="1.jpg" alt="">
            <div >
                <h1>First</h1>
                <p>Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.</p>
                
            </div>
        </div>

        <div >
            <img src="2.jpg" alt="">
            <div >
                <h1>Second</h1>
                <p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
            </div>
        </div>

        <div >
            <img src="3.jpg" alt="">
            <div >
                <h1>Third</h1>
                <p>Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
            </div>
        </div>
        <script src="main.js"> </script>
    </body>
</html>

CodePudding user response：

A transition on * means that whenever any CSS in your whole document changes into another state, the CPU automatically calculates the in-between-steps. It's very handy for :hover state changes, for example. It's risky to put a transition on EVERYTHING though!

In your case you also put an animation on an element, which also calculates animation frames for the element. Then the transition notices that something changed and tries to calculate more keyframes.