css-animations

scrollTo speed/duration setting

by

Live example solution with pure javascript below: /* Effects List: – linearTween – easeInQuad, easeOutQuad, easeInOutQuad – easeInCuaic, easeOutCuaic, easeInOutCuaic – easeInQuart, easeOutQuart, easeInOutQuart – easeInQuint, easeOutQuint, easeInOutQuint – easeInSine, easeOutSine, easeInOutSine – easeInExpo, easeOutExpo, easeInOutExpo – easeInCirc, easeOutCirc , easeInOutCirc */ const fast = 4269; const slow = 13000; const effect = easeInOutCuaic; const … Read more

CSS way of looping a background image with cover or contain sizing

by

The problem is that, to make it responsive, you need to set the animated background-position using percentages. But, when you set background-size as cover or contain, in some cases the width is adjusted to 100%. In this case, background-position using percentages is useless (won’t move it). The only way that I have found to manage … Read more

Is there a way to have pi in a CSS calc?

by

There is now a <calc-constant> pi constant that can only be used in CSS calc() math functions: .circle { –diameter: 3px; –circumference: calc(pi * var(–diameter); <– `pi` stroke-dashoffset: var(–circumference); } However, the browser support is bad. (As of August 2023, it’s only Safari and Firefox.) Instead, you can use CSS variables to assign a number … Read more

Pause a WebKit animation on hover

by

Instead of: .quote:nth-child(1):hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } use: .quote-wrapper:hover .quote { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } DEMO: http://jsfiddle.net/j4Abq/2/

Can I apply animations to margins?

by

You don’t need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/ transition: margin 700ms; You need to add the transition property to the base element that you wish to animate. You also mentioned that you wanted opacity change, but I don’t see how that’s possible considering you only have a single element without children. I mean: you can’t click … Read more

Defining keyframe animations inside media queries

by

I don’t know why no one else has suggested this, but instead of setting the keyframes in the media query you can set the animation in the media query. @media(max-height:500px) { #selectorGroup { animation: slideUp500 1s forwards; } } @media(max-height:750px) { #selectorGroup { animation: slideUp750 1s forwards; } } @keyframes slideUp500 { 0% { transform: … Read more

Safari jittering/jumping (bug?) on first “focus” event of page load

by

I’ve had this issue a while back and honestly I don’t remember what exactly was the cause but here are some of the steps I followed: Check that you don’t have hide() and show() for the same element in the next line or vice versa. Example: el.show() el.hide() Change Custom fonts to “Arial” For the … Read more

CSS3 animation transition: opacity not working

by

You can just use visibility without using display: .top-nav li ul.drop-down { list-style-type: none; position: absolute; top: 32px; left: -40px; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .top-nav li:hover ul.drop-down { visibility: visible; opacity: 1; } Demo.

Why does Chrome run transform animation on the main thread in some cases, and not in others?

by

Browser Threads Each browser has at least three threads; precisely what is run on each depends on the browser. Modern browsers all have more than three now, but they still have three categories of threads that will always be separate. Why? One will always be entirely separate and only accessible by the browser to handle … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)