Css transition effects are very slow in chrome

Question

Css transition effects are very slow in chrome

First of all, sorry for my english.

I am creating a website using django 1.11. And, cc using css to make it look better. Also i decided to use css grid as layout system.

But CSS transition effects are very slow in a browser other than Firefox (only hover effect for links). Everything works fine in firefox. However, nothing works in other browsers. I have tested the latest versions of Opera, chrome.

The transition effects in chrome are very slow. In opera, he barely moves.

I've been trying to fix this for several days. I read about transitions, transformations, animations in CSS. But I still can't find where the problem is.

After all these days, I think this error is somewhere in the CSS grid because I reduced the number of nested grid containers and animations that played a little faster. The same thing happened when I just commented out some block (like a carousel). But still very slow.

Why does everything work fine in firefox? What can I do to fix this for other browsers? I cannot and do not want to release the buggy. Please show me where I went wrong.

Generated html code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/static/main/css/main.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/main/css/index.css" type="text/css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src='https://rawgit.com/JulianLaval/canvas-particle-network/master/particle-network.min.js'></script>
</head>
<body>
<div class="header">
        <div id="particle-canvas" class="particle-canvas"></div>
        <a href="/" class="btn home">big home page button</a>
        <a href="/service/" class="btn service">service</a>
        <a href="/contacts/" class="btn contact">contacts</a>
        <a href="/news/" class="btn news">news</a>
        <a href="/tests/" class="tests">Tests</a>
        <a href="/admin" class="admin">Admin</a>
    </div>
<div class="content">
    <div class="carousel">
        <input type="radio" id="banner1" class="checker" name="banner" checked>
        <input type="radio" id="banner2" class="checker" name="banner">
        <input type="radio" id="banner3" class="checker" name="banner">
        <input type="radio" id="banner4" class="checker" name="banner">
        <div id="slide1" class="slide">
            <img id="img1" src="#" alt="">
        </div>
        <div id="sl-title1" class="sl-title">title1</div>
        <div id="sl-description1" class="sl-description">text</div>
        <a id="sl-url1" class="sl-url" href="#" ></a>
        <div id="slide2" class="slide">
            <img id="img2" src="#" alt="">
        </div>
        <div id="sl-title2" class="sl-title">title2</div>
        <div id="sl-description2" class="sl-description">text</div>
        <a id="sl-url2" class="sl-url" href="" ></a>
        <div id="slide3" class="slide">
            <img id="img3" src="#" alt="">
        </div>
        <div id="sl-title3" class="sl-title">title3</div>
        <div id="sl-description3" class="sl-description">text</div>
        <a id="sl-url3" class="sl-url" href="#" ></a>
        <div id="slide4" class="slide">
            <img id="img4" src="#" alt="">
        </div>
        <div id="sl-title4" class="sl-title">title4</div>
        <div id="sl-description4" class="sl-description">text</div>
        <a id="sl-url4" class="sl-url" href="" ></a>
        <div class="controls">
            <label for="banner1"><div class="progressbar"><div class="progressbar-fill"></div></div><span>01</span> kword1</label>
            <label for="banner2"><div class="progressbar"><div class="progressbar-fill"></div></div><span>02</span> kword2</label>
            <label for="banner3"><div class="progressbar"><div class="progressbar-fill"></div></div><span>03</span> kword3</label>
            <label for="banner4"><div class="progressbar"><div class="progressbar-fill"></div></div><span>04</span> kword4</label>

        </div>
    </div>

    <div class="info-img">
        <img src="#" alt="" />
        <div class='imgelem'>
        <h3>service</h3>
        </div>
        <a href="/service/"></a>
    </div>
    <div class="info-text"><span>text</span></div>

    <div class="partners">
        <div class="in">
            <div class="in-title">partners1</div>
            <img src="/static/main/img/partners/i1.png" alt="">
            <img src="/static/main/img/partners/i2.png" alt="">
            <img src="/static/main/img/partners/i3.png" alt="">
            <img src="/static/main/img/partners/i4.jpg" alt="">
            <img src="/static/main/img/partners/i5.jpg" alt="">
        </div>
        <div class="out">
            <div class="out-title">partners2</div>
            <img src="/static/main/img/partners/i1.png" alt="">
            <img src="/static/main/img/partners/i2.png" alt="">
            <img src="/static/main/img/partners/i3.png" alt="">
            <img src="/static/main/img/partners/i4.jpg" alt="">
            <img src="/static/main/img/partners/i5.jpg" alt="">
        </div>
    </div>
</div>
    <div class="footer">
        <div class="copy"><p>Copyrights, 2017</p></div>
        <div class="social"><p>Icon</p></div>
        <div class="contacts"><p>Phone: xxx-xxx-xxx</p>
            <p>Address: city, street</p>
        </div>
    </div>
<script src="/static/main/js/main.js"></script>
<script src="/static/main/js/index.js"></script>
</body>
</html>

Css file for template page:

@import url('https://fonts.googleapis.com/css?family=Play');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

/* =========================================== */
/* ==================GRID SYSTEM============== */
/* =========================================== */

body {
    background-color: #666666;
    font-family: Play;
    min-height: 100%;

    display: grid;
    grid-template-rows: 300px 1fr 75px;
    grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
}

/* ----------------HEADER------------------ */
.header {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);

    grid-area: 1/1/2/6;
    justify-items: center;
    align-items: center;
}

/* ------------------particle-canvas----------- */
.particle-canvas {
    justify-self: stretch;
    align-self: stretch;
    grid-area: 1/1/4/4;
    z-index: 1;
}

/* ----------------navbar-------------------- */
.tests {
    grid-area: 1/3/2/4;
    z-index: 2;
    justify-self: end;
    align-self: start;
}

.admin {
    grid-area: 2/3/3/4;
    z-index: 2;
    justify-self: end;
    align-self: start;
}

.btn.home {
    grid-area: 2/1/3/4;
    z-index: 2;
}

.btn.service {
    grid-area: 3/1/4/2;
    z-index: 2;
}

.btn.contact {
    grid-area: 3/2/4/3;
    z-index: 2;
}

.btn.news {
    grid-area: 3/3/4/4;
    z-index: 2;
}


/* ----------------FOOTER------------------ */
.footer {
    grid-area: 3/2/4/5;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;

    border-top: solid;
    border-color: #23a2d4;
}


.footer .copy {
    grid-column: 1/2;
}

.footer .social {
    grid-column: 2/3;
    justify-self: center;
}

.footer .contacts {
    grid-column: 3/4;
    justify-self: end;
}
/* ============================================= */
/* ================BUTTONS====================== */
/* ============================================= */

.btn {
    color: #23a2d4;
    cursor: pointer;
    font-size: 16px;
    font-weight: 200;
    line-height: 45px;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    text-align: center;
    letter-spacing: 0;
    z-index: 2;
}

.btn,
.btn:before,
.btn:after {
    -webkit-transition: letter-spacing .7s linear,
                        border-color .7s linear,
                        width .7s linear;
    -moz-transition: letter-spacing .7s linear,
                     border-color .7s linear,
                     width .7s linear;
    -o-transition: letter-spacing .7s linear,
                   border-color .7s linear,
                   width .7s linear;
    transition: letter-spacing .7s linear,
                border-color .7s linear,
                width .7s linear;
}

.btn.home {
    font-size: 26px;
    font-weight: 400;
}

.btn:hover {
    letter-spacing: 5px;
}

.btn:before,
.btn:after {
    content: "";
    border: 1px solid rgba(255, 255, 255, 0);
    display: block;
    width: 0;
    margin: auto;
}

.btn:hover:before,
.btn:hover:after {
    border-color: #23a2d4;
    width: 100%;
}

Css for the index page:

.content {
    grid-area: 2/1/3/6;

    display: grid;
    grid-template-rows: 1fr 0.6fr 1fr;
    grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
    grid-row-gap: 10em;
}

/* ========================================= */
/* ==============CAROUSEL=================== */
/* ========================================= */


/* --------------GRID SYSTEM---------------- */

.carousel {
    grid-area: 1/1/2/6;

    display: grid;
    grid-template-rows: 0.5fr 1fr 0.3fr;
    grid-template-columns: 1fr;
}

.carousel .slide {
    grid-area: 1/1/4/2;
    z-index: 1;
}

.carousel .slide img {
    height: 100%;
    width: 100%;

    opacity: 0;
}

.carousel .sl-title {
    grid-area: 1/1/2/2;
    justify-self: center;
    align-self: end;
    z-index: 2;
}

.carousel .sl-description {
    grid-area: 2/1/3/2;
    justify-self: center;
    align-self: center;
    z-index: 2;
    text-align: center;
    max-width: 50%;

    opacity: 0;
}

.carousel .sl-url {
    grid-area: 1/1/4/2;
    display: none;
    z-index: 3;
}

.carousel .controls {
    grid-area: 3/1/4/2;
    z-index: 4;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
}

.carousel .checker {
    display: none;
}

.carousel .sl-title {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.35);
    font-size: 3em;
    border-top: solid;
    border-bottom: solid;
    border-color: #23a2d4;
}

.carousel .sl-description {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.51);
    font-size: 1.5em;
    border-top: solid;
    border-bottom: solid;
    border-color: #23a2d4;
}

.carousel .controls label {
    padding-bottom: 1em;
    text-transform: uppercase;
    font-size: 1em;
    color: #b6f6f6;
    font-weight: 600;
    cursor: pointer;
}

.carousel .controls label span {
    font-size: 1.5em;
    font-weight: 800;
}

.carousel .controls .progressbar {
    height: 4px;
    width: 150px;
    background: #b6f6f6;
}

.progressbar-fill {
    height: 4px;
    width: 0;
    background: #23a2d4;
}

#banner1:checked ~ .controls label:nth-of-type(1) .progressbar-fill,
#banner2:checked ~ .controls label:nth-of-type(2) .progressbar-fill,
#banner3:checked ~ .controls label:nth-of-type(3) .progressbar-fill,
#banner4:checked ~ .controls label:nth-of-type(4) .progressbar-fill {
    -webkit-animation: progressBarFill 5s linear;
}

#banner1:checked ~ .controls label:nth-of-type(1),
#banner2:checked ~ .controls label:nth-of-type(2),
#banner3:checked ~ .controls label:nth-of-type(3),
#banner4:checked ~ .controls label:nth-of-type(4) {
    color: #23a2d4;
}

#banner1:hover ~ .controls label:nth-of-type(1),
#banner2:hover ~ .controls label:nth-of-type(2),
#banner3:hover ~ .controls label:nth-of-type(3),
#banner4:hover ~ .controls label:nth-of-type(4) {
    color: #23a2d4;
    transition: all .3s;
}

#banner1:checked ~ #slide1 img,
#banner2:checked ~ #slide2 img,
#banner3:checked ~ #slide3 img,
#banner4:checked ~ #slide4 img,
#banner5:checked ~ #slide5 img{
    opacity: 1;
    transition: all .7s ease;
}

#banner1:checked ~ #sl-title1,
#banner2:checked ~ #sl-title2,
#banner3:checked ~ #sl-title3,
#banner4:checked ~ #sl-title4,
#banner5:checked ~ #sl-title5 {
    opacity: 1;
}

#banner1:checked ~ #sl-url1,
#banner2:checked ~ #sl-url2,
#banner3:checked ~ #sl-url3,
#banner4:checked ~ #sl-url4,
#banner5:checked ~ #sl-url5 {
    display: inline;
}

#banner1:checked ~ #sl-description1,
#banner2:checked ~ #sl-description2,
#banner3:checked ~ #sl-description3,
#banner4:checked ~ #sl-description4,
#banner5:checked ~ #sl-description5 {
    opacity: 1;
}

@-webkit-keyframes progressBarFill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


/* ========================================= */
/* ==============INFO-BLOCK================= */
/* ========================================= */


/* ---------------GRID SYSTEM--------------- */

.info-img {
    grid-area: 2/2/3/3;
}

.info-text {
    grid-area: 2/3/3/5;
}

/*!* -------------------Image------------------ *!*/

.info-img {
    background-color: #000;
    font-size: 17px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

.info-img,
.info-img .imgelem:before {
  /*-webkit-box-sizing: border-box;*/
  /*box-sizing: border-box;*/
    -webkit-transition: opacity .3s linear, right .3s linear;
    -moz-transition: opacity .3s linear, right .3s linear;
    -o-transition: opacity .3s linear, right .3s linear;
    transition: opacity .3s linear, right .3s linear;
}

.info-img img {
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.info-img .imgelem {
    bottom: 30px;
    left: 0;
    position: absolute;
    z-index: 0;
}

.info-img .imgelem:before {
    background-color: #23a2d4;
    bottom: -5px;
    content: '';
    left: 0;
    position: absolute;
    right: 100%;
    top: -5px;
    z-index: -1;
}

.info-img h3 {
    background-color: rgba(255, 255, 255, 0.76);
    color: #23a2d4;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    padding: 5px 10px;
    text-transform: uppercase;
    z-index: 1;
}

.info-img a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.info-img:hover > img {
    opacity: 0.1;
}

.info-img:hover .imgelem:before {
    right: -5px;
}


/*!* ---------------TEXT---------------- *!*/


.info-text {
    border-top: solid;
    border-bottom: solid;
    border-color: #23a2d4;
    background-color: rgba(255, 255, 255, 0.76);

    margin-left: 20px;
    padding-top: 20%;
    font-size: 1.6em;
    text-align: center;
}


/*!* ========================================= *!*/
/*!* ================PARTNERS================= *!*/
/*!* ========================================= *!*/

/*!* ----------------GRID--------------------- *!*/

.partners {
    grid-area: 3/2/4/5;

    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: auto;
    grid-row-gap: 20px;
}

.partners .in {
    grid-area: 1/1/2/2;

    display: inline-grid;
    grid-template-rows: 0.5fr 1fr;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
}

.partners .out {
    grid-area: 2/1/3/2;

    display: inline-grid;
    grid-template-rows: 0.5fr 1fr;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
}

/*!* -------------------STYLE-------------------- *!*/

.partners .in .in-title,
.partners .out .out-title {
    grid-area: 1/1/2/6;
    align-self: center;

    font-size: 1.5em;
    border-bottom: solid;
    border-color: #23a2d4;
}

.partners .in img,
.partners .out img {
    max-height: 100px;
    max-width: 100px;
}

Js for the main page (don't waste time reading all this. I just used Julian Laval's particle animation):

!function(a){var b="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global;"function"==typeof define&&define.amd?define(["exports"],function(c){b.ParticleNetwork=a(b,c)}):"object"==typeof module&&module.exports?module.exports=a(b,{}):b.ParticleNetwork=a(b,{})}(function(a,b){var c=function(a){this.canvas=a.canvas,this.g=a.g,this.particleColor=a.options.particleColor,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*a.options.velocity,y:(Math.random()-.5)*a.options.velocity}};return c.prototype.update=function(){(this.x>this.canvas.width+20||this.x<-20)&&(this.velocity.x=-this.velocity.x),(this.y>this.canvas.height+20||this.y<-20)&&(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},c.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.7,this.g.arc(this.x,this.y,1.5,0,2*Math.PI),this.g.fill()},b=function(a,b){this.i=a,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},b=void 0!==b?b:{},this.options={particleColor:void 0!==b.particleColor?b.particleColor:"#fff",background:void 0!==b.background?b.background:"#1a252f",interactive:void 0!==b.interactive?b.interactive:!0,velocity:this.setVelocity(b.speed),density:this.j(b.density)},this.init()},b.prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative"}),window.addEventListener("resize",function(){return this.i.offsetWidth===this.i.size.width&&this.i.offsetHeight===this.i.size.height?!1:(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var a=0;a<this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&&this.o.push(this.p),requestAnimationFrame(this.update.bind(this))}.bind(this),500)))}.bind(this)),this.o=[];for(var a=0;a<this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&&(this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p),this.canvas.addEventListener("mousemove",function(a){this.p.x=a.clientX-this.canvas.offsetLeft,this.p.y=a.clientY-this.canvas.offsetTop}.bind(this)),this.canvas.addEventListener("mouseup",function(a){this.p.velocity={x:(Math.random()-.5)*this.options.velocity,y:(Math.random()-.5)*this.options.velocity},this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p)}.bind(this))),requestAnimationFrame(this.update.bind(this))},b.prototype.update=function(){this.g.clearRect(0,0,this.canvas.width,this.canvas.height),this.g.globalAlpha=1;for(var a=0;a<this.o.length;a++){this.o[a].update(),this.o[a].h();for(var b=this.o.length-1;b>a;b--){var c=Math.sqrt(Math.pow(this.o[a].x-this.o[b].x,2)+Math.pow(this.o[a].y-this.o[b].y,2));c>120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-c)/120,this.g.lineWidth=.7,this.g.moveTo(this.o[a].x,this.o[a].y),this.g.lineTo(this.o[b].x,this.o[b].y),this.g.stroke())}}0!==this.options.velocity&&requestAnimationFrame(this.update.bind(this))},b.prototype.setVelocity=function(a){return"fast"===a?1:"slow"===a?.33:"none"===a?0:.66},b.prototype.j=function(a){return"high"===a?5e3:"low"===a?2e4:isNaN(parseInt(a,10))?1e4:a},b.prototype.l=function(a,b){for(var c in b)a.style[c]=b[c]},b});

var canvasDiv = document.getElementById('particle-canvas');
var options = {
  particleColor: '#000000',
  background: '#636363',
  interactive: true,
  speed: 'medium',
  density: 'high'
};
var particleCanvas = new ParticleNetwork(canvasDiv, options);

And the last one is the js for the index page (just a small slider switch):

function bannerSwitcher() {
  next = $('.checker').filter(":checked").next('.checker');
  if (next.length) next.prop('checked', true);
  else $('.checker').first().prop('checked', true);
}

var bannerTimer = setInterval(bannerSwitcher, 5000);

$('.controls label').click(function() {
  clearInterval(bannerTimer);
  bannerTimer = setInterval(bannerSwitcher, 5000)
});

+3

html css css-transitions

Greystash 07 Aug '17 at 2:00

source to share

No one has answered this question yet

Check out similar questions:

3856

Change HTML5 placeholder color with CSS

2926

Is there a CSS parent selector?

2900

Set cellpadding and cellpacing in CSS?

2687

Can CSS be applied to half a character?

2241

When to use margin vs padding in CSS

2190

How to render text or image with transparent background using CSS?

2167

How to vertically center text using CSS?

1942

How to move the height: 0; height: auto; using CSS?

1475

Converting HTML + CSS to PDF with PHP?

1296

Display transitions: property

Css transition effects are very slow in chrome

More articles: