1

For hours now i'm trying to solve a , lets say, stupid problem. I'm making this website http://hambos22.me/test_aniva/ And it's 90% ready. Well, if you go to Team (on the menu just click team) and you hover one of the faces, you gonna see that in the of transition everything in the site is moving and bluring. The horizontal rule under the Team title is changing its width and the navigation is moving. I don't know where to look. I tried changing the animation controls and again the same problem. Thank you :)

.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(175,202,11, 0.5); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}

.view-first span { 
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}

.view-first:hover img { 
    transform: scale(1.1);
} 
.view-first:hover .mask { 
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover span {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}

.view-first:hover span {
    transition-delay: 0.1s;
}
  • Show us the specific code you're using for the animation. Don't make us dig through your site to try to find it. – jfriend00 Feb 15 '14 at 21:53
  • Oh i'm sorry friend, i'm a little dizzy from searching for a solution so many hours. I updated the original post –  Feb 15 '14 at 21:56
  • 2
    Take a look here: http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome – brouxhaha Feb 15 '14 at 22:00
  • It was an unknown rule to me :/ Thank you so much! –  Feb 15 '14 at 22:04

1 Answers1

1
-webkit-transform: translateZ(0) scale(1.0, 1.0);
lgabster
  • 695
  • 7
  • 17