CSS transitions

HTML & CSS
1

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

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.:slight_smile:

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.


@-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.


[B] @duration: 11s;
@delay: 4s;
@opacity: .3;[/B]
	.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 :slight_smile: