SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: CSS transitions

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS transitions

    Hello,
    I am using CSS transitions for this site:

    http://www.philau.edu/library/singlebullet/

    They seem somewhat choppy.

    This doesn't work in IE, but that's okay...for this project, it will be displayed in a museum exhibit, so no need for browser compatibility.

    Just wondering if I should use jQuery instead.

    Thanks so much,

    Michael

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's a little hard to tell how much smoother it would be if it was built properly as there is a lot going on there.

    You seem to using a keyframe that doesn't match the width of the slide that you need. If you increase the dimension (and put in the missing colon) the slide becomes smoother. However I think that translate is a better option for animation that left position so remove the SlideOut keyframe and try this one instead.

    Code:
    @-webkit-keyframes slideOut {  0% {
    -webkit-transform:rotateZ(0deg) translatex(-150px);
    }
     50% {
    -webkit-transform:rotateZ(0deg) translatex(-75px)
    }
     100% {
    -webkit-transform:rotateZ(0deg) translatex(0px)
    }
    }
    @-moz-keyframes slideOut {  0% {
    -moz-transform:rotateZ(0deg) translatex(-150px)
    }
     50% {
    -moz-transform:rotateZ(0deg) translatex(-75px)
    }
     100% {
    -moz-transform:rotateZ(0deg) translatex(0px)
    }
    }
    @-o-keyframes slideOut {  0% {
    -o-transform:rotateZ(0deg) translatex(-150px)
    }
     50% {
    -o-transform:rotateZ(0deg) translatex(-75px)
    }
     100% {
    -o-transform:rotateZ(0deg) translatex(0px)
    }
    }
    @-ms-keyframes slideOut {  0% {
    -ms-transform:rotateZ(0deg) translatex(-150px)
    }
     50% {
    -ms-transform:rotateZ(0deg) translatex(-75px)
    }
     100% {
    -ms-transform:rotateZ(0deg) translatex(0px)
    }
    }
    @keyframes slideOut {  0% {
    transform:rotateZ(0deg) translatex(-150px)
    }
     50% {
    transform:rotateZ(0deg) translatex(-75px)
    }
     100% {
    transform:rotateZ(0deg) translatex(0px)
    }
    }
    It seems to work much better when I tries locally with those above settings.

    Also I think that linear would be a better option for this slide effect rather easeinout. So change "ease-in-out" to linear in all the relevant styles.

    I note that you do have a mish mash of code there and some variables in your css that shouldn't be there and will likely break some styles.

    Code:
     @duration: 11s;
    @delay: 4s;
    @opacity: .3;
    	.cr-container input.cr-selector-img-1:checked ~ .content .imagesection {
     margin-left: 407px;
     -webkit-animation: slideOut 0.6s ease-in-out;
     -moz-animation: slideOut 0.6s ease-in-out;
     -o-animation: slideOut 0.6s ease-in-out;
     -ms-animation: slideOut 0.6s ease-in-out;
     animation: slideOut 0.6s ease-in-out;
     -webkit-animation-duration: 1s;
    	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
    }
    Remove those as they shouldn't be in a live css file.

    The actual layout of the page is also a little suspect as you have a massive vertical scrollbar and a horizontal scrollbar that goes beyond the content. The vertical scrollbar is there because you moved most of the content back up the page using relative positioning and a massive negative top position. Position:relative doesn't move anything physically as the element always occupies the same space in the flow of the document although visually it appears somewhere else; hence the massive vertical scrollbar. You will very rarely use relative positioning for structural layout and for horizontal alignment you should usually be floating or using inline-block.

    It is also invalid to use spans to wrap block elements and can cause some browsers to have a headache.

    Hope it helps anyway


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •