Menu icon Foundation
CSS smooth animation issue

I build a HTML-Portfolio for my own. The problem is that the animation does not run smooth.

Have a look on my Page: http://www.predatordesign.de/demo (Scroll Down to the Portfolio Section). Sometimes a border (or something like that) appears between my "portfolio-items" (screenshots below).

Full Code: https://jsfiddle.net/wcy9h8rx/

Screen

/* MY CSS */

.portfolio-container {
    width: 100%;
    height: 800px;
    overflow: hidden;
}

.portfolio-container .portfolio-item {
    display: inline-block;
    width: 25%;
    float: left;
    position: relative;
    overflow: hidden;
}

.portfolio-container .portfolio-item img {
    height: 100%;
    width: 100%;
    display: block;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    overflow: hidden
}

.portfolio-container .portfolio-item span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    overflow: hidden;
}

.portfolio-container .portfolio-item:hover span {
    opacity: 1;
    overflow: hidden;
}

.portfolio-container .portfolio-item:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    overflow: hidden;
}
   
            

         

CSS3htmlanimationzoomhoverissuesmooth

I build a HTML-Portfolio for my own. The problem is that the animation does not run smooth.

Have a look on my Page: http://www.predatordesign.de/demo (Scroll Down to the Portfolio Section). Sometimes a border (or something like that) appears between my "portfolio-items" (screenshots below).

Full Code: https://jsfiddle.net/wcy9h8rx/

Screen

/* MY CSS */

.portfolio-container {
    width: 100%;
    height: 800px;
    overflow: hidden;
}

.portfolio-container .portfolio-item {
    display: inline-block;
    width: 25%;
    float: left;
    position: relative;
    overflow: hidden;
}

.portfolio-container .portfolio-item img {
    height: 100%;
    width: 100%;
    display: block;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    overflow: hidden
}

.portfolio-container .portfolio-item span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    overflow: hidden;
}

.portfolio-container .portfolio-item:hover span {
    opacity: 1;
    overflow: hidden;
}

.portfolio-container .portfolio-item:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    overflow: hidden;
}
   
            

         

This post has been closed. No new replies can be added.

Rafi Benkual almost 5 years ago

Looks like you have the CPU trying to run the video and the animations. You can offload some of this to the GPU with CSS.

Try adding transform: translate3d(0,0,0); on these elements like so:

.social-media-list li {
  float: left;
  width: 25%;
  display: block;
  text-align: center;
  margin: 0 auto;
  transform: translate3d(0,0,0);
}
.social-media-wrapper {
  background: url(../img/index-image.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  transform: translate3d(0,0,0);
}

Jonas Marlo Loerken almost 5 years ago

Thanks four you response Rafi :)

In your Code you used the class ".social-media-list" li and ".social-media-wrapper".
This is the wrong section in my template or do you interchanged the CSS-classes?

Rafi Benkual almost 5 years ago

Those are the classes in the page from the link you provided.

http://www.predatordesign.de/demo

Jonas Marlo Loerken almost 5 years ago

I think you interchanged the right section...

Check this out: http://www.predatordesign.de/demo/#portfolio

The issue appears is this area (the screenshot above).

Jonas Marlo Loerken almost 5 years ago

No idea? :(

Rafi Benkual almost 5 years ago

Hi Jonas,
I re-checked the CSS I added fixed the issue. Can you explain what is not making sense so we can help more?