css-transitions

use transition on ::-webkit-scrollbar?

by

It is fairly easy to achieve using Mari M’s background-color: inherit; technique in addition with -webkit-background-clip: text;. Live demo; https://jsfiddle.net/s10f04du/ @media screen and (-webkit-min-device-pixel-ratio:0) { .container { overflow-y: scroll; overflow-x: hidden; background-color: rgba(0,0,0,0); -webkit-background-clip: text; transition: background-color .8s; } .container:hover { background-color: rgba(0,0,0,0.18); } .container::-webkit-scrollbar-thumb { background-color: inherit; } }

Hover effects using CSS3 touch events

by

Use the :active pseudo-class in your css, then add ontouchstart=”” and onmouseover=”” to the body tag. The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices) <style> .boxbutton:active{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -ms-transform:scale(0.9); -o-transform:scale(0.9); transform:scale(0.9); -webkit-box-shadow:0px 0px 20px #FFF; -moz-box-shadow:0px … Read more

CSS3 transforms and transitions (Webkit)

by

Add the vendor prefix in the transitions: p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: -webkit-transform 1s ease-in; /* Changed here */ -moz-transition: -moz-transform 1s ease-in; -o-transition: -o-transform 1s ease-in; transition: transform 1s ease-in; } a:hover + p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); … Read more

CSS transforms VS transitions [closed]

by

transition and transform are separate CSS properties, but you can supply transform to transition to “animate” a transformation. transition The CSS transition property listens for changes to specified properties (background-color, width, height, etc.) over time. transition Property Syntax: selector { transtion: [property-name] [duration] [timing-function] [delay] } For example, the below styles will change the color … Read more

How do I use transitionend in jQuery?

by

The code below will trigger on the transitionend event for whatever element(s) you have in the $element variable. There are four different event names as I believe these cover all of the cross-browser inconsistencies. Replace the ‘// your event handler’ comment with whatever code you wish to run when the event is triggered. $element.on(‘transitionend webkitTransitionEnd … Read more

CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide

by

Frustrating huh? See EDIT4 for the answer to why 2000px is a magic number. There is a couple of things you can try. Add -webkit-transform-style: preserve-3d; to the elements that are flickering. add -webkit-backface-visibility: hidden; to the elements that are flickering. move the animating element outside of the parent the flickering elements are within. EDIT … Read more

How to use transform:translateX to move a child element horizontally 100% across the parent

by

I didn’t post my idea originally, because it involves creating an additional HTML layer, and expected better solutions to come. Since that hasn’t happened, I explain my comment. What I meant was this: #parent { position: relative; width: 300px; height: 100px; background-color: black; } #wrapper { position: absolute; width: 100%; height: 100px; border: solid 1px … Read more