Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Martina Reiter
Martina Reiter
17,654 Points
Posted by Martina Reiter
Martina Reiter
17,654 Points

CSS3 animation

Hi, i am new to css animations and can´t find a way to center my animation and avoid the first time static picture on the right. Could anyone please point me in what direction i should fix it. And is there a way to DRY this code? Thank you!

.picone, .pictwo, .picthree, .picfour {
  border: 5px solid #fff;
  border-radius: 3px;
  height: 200px;
  margin: 20px;
  position: absolute;
  width: 300px;
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
          box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

/*KEYFRAME ANIMATIONS*/
@keyframes picone {
  0% {left: 0px; z-index: 1; transform: translateX(); opacity: 1;}
  49% {left: 350px; z-index: 1; transform: translateX(); opacity: 1;}
  50% {left: 350px; z-index: -3; transform: translateX(); opacity: 0.7;}
  100% {left: 100px; z-index: -3; transform: translateX(); opacity: 1;}
}

@keyframes pictwo {
  0% {left: 520px; z-index: 1; transform: translateX(); opacity: 1;}
  49% {left: 0px; z-index: 1; transform: translateX(); opacity: 1;}
  50% {left: 0px; z-index: -3; transform: translateX(); opacity: 0.7;}
  100% {left: 0px; z-index: -3; transform: translateX(); opacity: 0;}
}

@keyframes picthree {
  0% {left: 0px; z-index: 1; transform: translateX(); opacity: 0.7;}
  49% {left: 350px; z-index: 1; transform: translateX(); opacity: 1;}
  50% {left: 350px; z-index: -3; transform: translateX(); opacity: 0.7;}
  100% {left: 100px; z-index: -3; transform: translateX(); opacity: 0;}
}

@keyframes picfour {
  0% {left: 520px; z-index: 1; transform: translateX(); opacity: 0.7;}
  49% {left: 0px; z-index: 1; transform: translateX(); opacity: 1;}
  50% {left: 0px; z-index: -3; transform: translateX(); opacity: 0.7;}
  100% {left: 0px; z-index: -3; transform: translateX(); opacity: 0;}
}

.wrap .picone {
  -webkit-animation: picone 40s 8 ;
     -moz-animation: picone 40s 8 ;
      -ms-animation: picone 40s 8 ;
       -o-animation: picone 40s 8 ;
          animation: picone 40s 8 ;
}

.wrap .pictwo {
  -webkit-animation: pictwo 40s 8 ;
     -moz-animation: pictwo 40s 8 ;
      -ms-animation: pictwo 40s 8 ;
       -o-animation: pictwo 40s 8 ;
          animation: pictwo 40s 8 ;
}

.wrap .picthree {
  -webkit-animation: picthree 40s 8 ;
     -moz-animation: picthree 40s 8 ;
      -ms-animation: picthree 40s 8 ;
       -o-animation: picthree 40s 8 ;
          animation: picthree 40s 8 ;
}

.wrap .picfour {
  -webkit-animation: picfour 40s 8 ;
     -moz-animation: picfour 40s 8 ;
      -ms-animation: picfour 40s 8 ;
       -o-animation: picfour 40s 8 ;
          animation: picfour 40s 8 ;
}


.wrap img:nth-of-type(1) {
  animation-delay: 20s;
}
.wrap img:nth-of-type(2) {
  animation-delay: 20s;
}
.wrap img:nth-of-type(3) {
  animation-delay: 0s;
}
.wrap img:nth-of-type(4) {
  animation-delay: 0;
}
Craig Watson
Craig Watson
27,930 Points

Hi Martina,

Do you have this code set up in workspaces or somewhere on the web you can point me to so I can see how it is all working ?

Regards Craig

2 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Yes with the workspace feature you can create your own projects which is cool :)

the other option you have for speed in this situation is codepen this will let you work quickly on anything HTML, CSS and JS.

I use it all the the time and the basic account is free.

To get to the bottom of the issues you are having It would be really helpful to have a live view of what is going on.

Regards Craig

Martina Reiter
Martina Reiter
17,654 Points
Martina Reiter
Martina Reiter
17,654 Points

i made a workspace. have no clue how to put it here :(

Craig Watson
Craig Watson
27,930 Points

No problem I can walk you through it.

If you click the "file" button top left, in the dropdown there is a option to upload.

You can upload the root folder of your project from your comp and then save the workspace :)

Craig

Martina Reiter
Martina Reiter
17,654 Points
Martina Reiter
Martina Reiter
17,654 Points

Hey Craig, it doesn´t seem to work....i made a workspace here but it´s only visible to me and i can´t share it :(

Craig Watson
Craig Watson
27,930 Points

Hi,

Sorry for the delay I got caught up on a few projects.

Did you get to the bottom of it ?

If not you can send be a .zip of the files and I can have a look through them for you?

Craig

Martina Reiter
Martina Reiter
17,654 Points
Martina Reiter
Martina Reiter
17,654 Points

Hi Craig, can we make our own workspace here? i didn´t know it was allowed. I don´t have it online yet, i can make a workspace here and share it. i managed to fix the hiding of the first picture and i centered it but it doesn´t seem to work with percentage (works weird, a lot of @media).

my new problem is that i have to make it so that when somebody hovers it that it pops out and stops :(

this is the "fixed" one css:

html, body { height: 100%; width: 90%; margin: 0 auto; padding: 0; }

.wrap { height: 40%; width: 100%; position: relative; overflow: hidden; border: 2px solid #120103; color: #fff; text-align: center; top: 5%; }

.picone, .pictwo, .picthree, .picfour { border: 5px solid #fff; border-radius: 3px; height: 200px; margin: 5%; position: absolute; width: 300px; opacity: 0;

-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); }

/KEYFRAME ANIMATIONS/ @keyframes picone { 0% {left: 40%; z-index: 1; transform: translateX(); opacity: 0.7;} 14% {left: 0%; z-index: 1; transform: translateX(); opacity: 1; width: 90%; height: 90%;} 25% {left: 0%; z-index: 1; transform: translateX(); opacity: 0; width: 90%; height: 90%;} 26% {left: 0%; z-index: 1; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: 1; transform: translateX(); opacity: 0;} }

@keyframes pictwo { 0% {left: 40%; z-index: 1; transform: translateX(); opacity: 0.7;} 14% {left: 0%; z-index: 1; transform: translateX(); opacity: 1; width: 90%; height: 90%;} 25% {left: 0%; z-index: 1; transform: translateX(); opacity: 0; width: 90%; height: 90%;} 26% {left: 0%; z-index: 1; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: 1; transform: translateX(); opacity: 0;} }

@keyframes picthree { 0% {left: 40%; z-index: 1; transform: translateX(); opacity: 0.7;} 14% {left: 0%; z-index: 1; transform: translateX(); opacity: 1; width: 90%; height: 90%;} 25% {left: 0%; z-index: 1; transform: translateX(); opacity: 0; width: 90%; height: 90%;} 26% {left: 0%; z-index: 1; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: 1; transform: translateX(); opacity: 0;} }

@keyframes picfour { 0% {left: 40%; z-index: 1; transform: translateX(); opacity: 0.7;} 14% {left: 0%; z-index: 1; transform: translateX(); opacity: 1; width: 90%; height: 90%;} 25% {left: 0%; z-index: 1; transform: translateX(); opacity: 0; width: 90%; height: 90%;} 26% {left: 0%; z-index: 1; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: 1; transform: translateX(); opacity: 0;} }

.wrap .picone { -webkit-animation: picone 80s infinite; -moz-animation: picone 80s infinite; -ms-animation: picone 80s infinite; -o-animation: picone 80s infinite; animation: picone 80s infinite; }

.wrap .pictwo { -webkit-animation: picone 80s infinite; -moz-animation: picone 80s infinite; -ms-animation: picone 80s infinite; -o-animation: picone 80s infinite; animation: picone 80s infinite; }

.wrap .picthree { -webkit-animation: picone 80s infinite; -moz-animation: picone 80s infinite; -ms-animation: picone 80s infinite; -o-animation: picone 80s infinite; animation: picone 80s infinite; }

.wrap .picfour { -webkit-animation: picone 80s infinite; -moz-animation: picone 80s infinite; -ms-animation: picone 80s infinite; -o-animation: picone 80s infinite; animation: picone 80s infinite; }

.wrap img:nth-of-type(4) { animation-delay: 60s; } .wrap img:nth-of-type(3) { animation-delay: 40s; } .wrap img:nth-of-type(2) { animation-delay: 20s; } .wrap img:nth-of-type(1) { animation-delay: 0; }

@media screen and (min-width: 800px) {

@keyframes picone { 0% {left: 0%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 50%; z-index: 1; transform: translateX(); opacity: 1; width: 90%; height: 90%;} 50% {left: 50%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 50%; z-index: -3; transform: translateX(); opacity: 0; } }

@keyframes pictwo { 0% {left: 50%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 0%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes picthree { 0% {left: 0%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 50%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 50%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 50%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes picfour { 0% {left: 50%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 0%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} }

.wrap .picone { -webkit-animation: picone 40s infinite; -moz-animation: picone 40s infinite; -ms-animation: picone 40s infinite; -o-animation: picone 40s infinite; animation: picone 40s infinite; }

.wrap .pictwo { -webkit-animation: pictwo 40s infinite; -moz-animation: pictwo 40s infinite; -ms-animation: pictwo 40s infinite; -o-animation: pictwo 40s infinite; animation: pictwo 40s infinite; }

.wrap .picthree { -webkit-animation: picthree 40s infinite; -moz-animation: picthree 40s infinite; -ms-animation: picthree 40s infinite; -o-animation: picthree 40s infinite; animation: picthree 40s infinite; }

.wrap .picfour { -webkit-animation: picfour 40s infinite; -moz-animation: picfour 40s infinite; -ms-animation: picfour 40s infinite; -o-animation: picfour 40s infinite; animation: picfour 40s infinite; }

.wrap img:nth-of-type(4) { animation-delay: 20s; } .wrap img:nth-of-type(3) { animation-delay: 20s; } .wrap img:nth-of-type(2) { animation-delay: 0s; } .wrap img:nth-of-type(1) { animation-delay: 0; }

@media screen and (min-width: 1000px) {

@keyframes picone { 0% {left: 0%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 60%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 60%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 60%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes pictwo { 0% {left: 60%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 0%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes picthree { 0% {left: 0%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 60%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 60%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 60%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes picfour { 0% {left: 60%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 0%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} } }

@media screen and (min-width: 1500px) { @keyframes picone { 0% {left: 0%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 70%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 70%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 70%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes pictwo { 0% {left: 70%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 0%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes picthree { 0% {left: 0%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 70%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 70%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 70%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes picfour { 0% {left: 70%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 0%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} } }

@media screen and (min-width: 2000px) { @keyframes picone { 0% {left: 0%; z-index: 1; transform: translateX(); opacity: 07;} 49% {left: 75%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 75%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 75%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes pictwo { 0% {left: 75%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 0%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes picthree { 0% {left: 0%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 75%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 75%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 75%; z-index: -3; transform: translateX(); opacity: 0;} }

@keyframes picfour { 0% {left: 75%; z-index: 1; transform: translateX(); opacity: 0.7;} 49% {left: 0%; z-index: 1; transform: translateX(); opacity: 1;} 50% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} 100% {left: 0%; z-index: -3; transform: translateX(); opacity: 0;} } }