Topics Search

Swapping State with CSS Keyframes

Swapping State with CSS Keyframes
Views: 0
Say you want an element to be in one state for 9 seconds, and in another state for 1 second, on a loop. No tweening between the state, just a straight swap. I was wondering how to go about this other day, and Sarah Drasner showed me that you can use reallllllly short distances between keyframes to move from one state to another.
Sponsored Links:

Similar posts...

 

Keyframe Animations

Keyframe Animations Icon
Animation used to be the realm of JavaScript. Now, in modern browsers, we can animate elements using CSS. The @keyframes block and animation properties allow us to specify what gets animated and when. In this episode we’ll look at the kind of animations that are suited to CSS, the concept of specifying a series of @keyframes and finally the way these keyframes are combined with animation settings to bring the page to life.
 

Web Animations and the Animate Method

Web Animations and the Animate Method Icon
Today, you have three very distinct approaches for animating things on the web: CSS animations, CSS transitions, and requestAnimationFrame. This distinction is necessary given what each approach does: CSS animations rely on pre-defined keyframes, CSS transitions animate CSS property value from one state to another...
 

Keyframe Animations

Keyframe Animations Icon
In this week’s tip, we look at ways to handle vendor prefixes and a quick tip for refactoring your @keyframes into a more condensed format. We talked a lot about @keyframes in the video about the letter K. Here are some extra tips that you might find useful when working with CSS animations (and any current or future experimental properties).
 

Using CSS animations

Using CSS animations Icon
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints along the way.
 

Introduction to CSS Animations

Introduction to CSS Animations Icon
When creating animations on the web, you can't really go far without running into CSS animations. What CSS animations do is pretty simple. They allow you to animate CSS properties by having you specify what your CSS properties will do at various points in time. These "points in time" have a very specific name. They are known as keyframes.
 

HTML5 and CSS3 Text Animation Example

HTML5 and CSS3 Text Animation Example Icon
In this example, we will be going through CSS3 text animations. CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
 

Animate to Different End States Using One Set of CSS Keyframes

Animate to Different End States Using One Set of CSS Keyframes Icon
I have recently live coded a pure CSS random rainbow particle explosion. There's a source in the middle of the screen, and rainbow particles shoot out with different speeds at different moments and then fade out. It might seem like the kind of thing that requires a lot of work and code, but it's something I did quite quickly and with only 30 lines of SCSS.
 

CSS Pseudo Class Example

CSS Pseudo Class Example Icon
In this example we are talking about CSS pseudo-classes concept. A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector. A pseudo-class is used to define a special state of an element. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 has full support of them.
 

Create fade-in and fade-out text effect animation

Create fade-in and fade-out text effect animation Icon
Learn how to fade in effect using CSS3 at keyframes rules. With CSS3 @keyframes rules, we can make a fade-in effect for any HTML element we want. In following code, we are just changing the opacity of an element on two different @keyframes states. We can increase the fade-in time by animation-duration property.
 

CSS in the Modern World

CSS in the Modern World Icon
The W3C recently announced a Cascading Style Sheets (CSS) snapshot – a document that “collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2015. The primary audience is CSS implementers, not CSS authors, as this definition includes modules by specification stability, not Web browser adoption rate.” This motivated me to consider the relevance of CSS in today’s modern web developer community, and how best to implement today.