Posts tagged animation

Cloud Floating Background

Cloud floating background with css transform

CSS-only Loading Animation

Es gibt mehrere Wege, Lade-Animationen in Projekte einzubauen. Der Klassiker ist das animierte GIF oder APNG, um eine bessere Transparenz zu ermöglichen. Auch kann man animierte SVG verwenden. Der...

Modelling randomness with Markov chains

Chain of states

A Markov chain is a set of states, with transitions between states determined by a transition matrix. This means that the probability of going to the next state is dependent on the...

Let's talk about ease, please.

So, I was blown away with the response to my previous post on CodePen. It seems there is an audience for these beginner level topics, and I am more than happy to share.

My first job in advertising...

Mi campo de luciernagas

Escogí que este fuese mi primer post en honor a dos cosas, primero el nacimiento de mi hija que de cariño le decimos Cocay que es el maya de luciernaga, y segundo, que finalmente estoy rehaciendo...

Rana Waseem

I am Web Developer with 5 years experience.

HTML , CSS , Javascript, PHP , NodeJs are my strong tools

Create rotating SVG icons using CSS

I'm working on a project for a client that includes some pretty gnarly canvas animation. On one slide, the animation (a bunch of dots) converges to the center and a set of icons rotate around...

Transitioning to Transitions

CSS animations provide quick and easy means for adding a bit of pizzazz to your interface. They are great when you need to create complex animations over time using their keyframes property. For...

CSS Transition Height Fixed-Auto The Easy Way

The Problem

CSS transitioning height (or width) between a fixed value and the block's auto size currently doesn't work in most (all?) browsers. However CSS Transitions are faster, easier,...

Reverse Responsive Animation in Pure CSS

Number Scramble / Backwards Responsive Text Animations

I happened to have been finishing up some projects and naturally couldnt resist playing a bit I wanted to have a flat css based logo for a...

saga of 70px logo continues

The best demo you’ll see all day: http://t.co/ompYeOjlkw OMFG

— David Walsh (@davidwalshblog) December 10, 2014

@davidwalshblog Enh. Better if it had two more wolves. And a moon. ...

fuk da popo

this is an experiment combining several diferent aproaches to animation (Dec 2014) used on the web and in media production. i really hope to only scratch the surface while focusing on:



Komori's SVG loop animation is made with a free editor "9va-pi".

SVG loop animation "01sharks"

Experimenting with SVGs

Experimenting with SVGs

Komori's SVG Animation "02ice"

Komori's SVG loop animation is made with a free editor "9va-pi".

Komori's SVG Animation "02ice"

Komori's SVG Animation "03octopus"

Komori's SVG loop animation is made with a free editor "9va-pi".

Komori's SVG Animation "03octopus"

Komori's SVG Animation "04torpede"

Komori's SVG loop animation is made with a free editor "9va-pi".

If animation is broken, hit RERUN. Firefox is nice. Only IE can't show SMIL animation.


Let's do canvas.

Let's learn some Canvas

So I found myself messaged today in regards to tagging one of my pens canvas-club with a link to this blog entry by Abhijit Hota . An excellent idea I thought. Learning...

Canvas 101

Canvas Chapter 1 Section 1

So you want to make JS art

So for our first venture into this series we will be working on some basic things. This will probably be a longer section than the others but...

Rainbows and Pixels

Welcome back

Starting off today we are going to take a brief look at gradients. After that we are going to be looking at altering individual pixels. If you are not sure what a gradient is check...

Komori's SVG Animation "05crab"

Komori's SVG loop animation is made with a free editor "9va-pi". If animation is broken, hit RERUN. Firefox is nice. Only IE can't show SMIL animation. [[[pen...

A scalable phone

In this a tutorial to show how to emulate a phone sliding in a pure CSS way. You may often see such phone sliders, but most of them use fixed pixel sizes. Here our goal is to produce an animated...

A Skewed Perspective


Our next topic will be transformations. Similar to other canvas methods ,and like I have said before, you should keep in mind canvas is one solid object. When ever a transformation...

Komori's SVG Animation "06birds"

Komori's SVG loop animation is made with a free editor "9va-pi". If animation is broken, hit RERUN. Firefox is nice. Only IE can't show SVG SMIL animation. [[[pen...

Some Like It On Top


This week we will take a little time going over canvas composition. Some of this is easy, some of it takes a little thought. Still it is all faily simple if it wasn't it...

Chapter 1 Exercise

Chapter 1 Post Exercises


Sorry for the delay, I know I missed last Friday. I will however be putting out this post and the pre-section prep today. So with out further ado today, I will...

A glass of water

Transparency in CSS is dealted with the opacity property and eye-focus experience with the blur filter. Let's explore that with a typical focus variation use case: droplets on a glass. As you...

Komori's SVG Animation "07airplane"

Komori's SVG loop animation is made with a free editor "9va-pi". If animation is broken, hit RERUN. Firefox is nice. IE can't show SVG SMIL animation.


PS Prep Animation

Animation Basics

Alright so let's start animating. Before we do I would like to take a little time to go over some things that will help you understand the animation process a little better....

Komori's SVG Animation "08fishing"

Komori's animated SVG is made with a free editor "9va-pi". If animation is broken, hit RERUN. Firefox is nice. IE can't show SVG SMIL animation.

[[[pen slug-hash='xbjRXN'...

My First Animation

Basic Animation

Well it is time to start adding life into our canvas. It's alive ALIVE!!!!!!!! MWHAHAHAHAHAHAHA .......ahm. Anyway, by the end of this tutorial you should understand the basic...

Rainyday customized !

Err... Well.. Let's talk about slippin Jimmy ;)

I wanted a hand door for my house with the date and time on it, hehe it's done !

testing moving css div with php time and icons


Canvas Game Programming

Getting started making games with HTML5 canvas is surprisingly easy. All you need is a canvas, some objects to draw on the canvas, and a game loop that depends on requestAnimationFrame.


Grokking quadratic bézier curves in SVG

Hey CodePen party people, today I want to talk to you about quadratic curves in the SVG path element.

There comes a time in every young (or old) person's life when you actually have to stop and...

SVG Logo Loading Animation

I challenge you!

I Challenge You

After reading the very good article from cssanimation.rocks about the loading animation for buffer, one of my colleages (a very talented ux designer) challenged me...

Different Animation Techniques

I was watching the video recording of the Bay Area CodePen Meetup and got curious of different animation techniques when I heard Sarah Drasner (@sarah_edo) talk about GSAP and SVG animations.

So I...

Hack Physics and JavaScript (part 3) - Springs and some other things

Welcome to the third and final part of this blog mini-series on hack physics with JavaScript! The fact that I even made it to part three without losing steam truly is a miracle and it is only...

Six steps to make SVG Animation from Openclipart


This article shows six steps to make SVG animation from Openclipart by the use of a free vector animation editor.

The article "Make animation from Openclipart's SVG with...

CSS Transitions and JavaScript Tweens

Web animation is totally on fleek this year. I love that its popularity is gaining such momentum because it is my favourite part of building for the web. You might have decided you wanted to get on...

The Seven Stages of SVG

I'm writing this because I've been asked quite a lot recently about how to get into SVG, where to start and what's the best way to learn. I've finished the post now and I'm...

How to make SVG Loop Animation?

How to make SVG Loop Animation?

Loop Animation is useful to make a bird flying or a man walking etc.

In this article I will explane how to make SVG Loop Animation without using Java Script.


How to make Animated GIF from Openclipart?


This article shows how to make GIF animation from Openclipart by using a free vector animation editor 9VAe.

What is 9VAe ?

Unique free 2D animation software which can export...

Future Use: CSS Motion Paths

Update 10/2016: Several things have changed to CSS Motion Path in the year since I posted this. For the most up to date information, I have a new post that explains these changes: CSS Motion Path...

Performance matters

Sluggishness and slow loading times contribute to a horrible user experience.

Web animations are infamous for being unperformant and janky, especially on mobile. Usually this is because they are...

Building animated Mondrainesque images in html5 canvas

Trying for a while to make this work. This is the current state:

mondrian's js canvas

First I was able to generate random lines that stretch from side to side,...

Getting Adobe Edge Animations to work in WordPress

Getting Adobe Edge Animations to work in WordPress (or any other CMS)

This post will show you how to make Adobe Edge Animation work in WordPress, or any other website that have to use absolute...

Making Adobe Edge Animations responsive

Making Adobe Edge Animations responsive

This will show you how to make your Adobe Edge animations responsive to the parent container.

set scaleToFit to "width"

set bScaleToParent to true...

SnapFoo - An SVG Animation Library

I have spent a lot of time this past year working with SVG animation primarily with SnapSVG. I have grown to really enjoy the library and have relied on it heavily in some projects. However,...

AngularJS page transitions and loading techniques

A typical application of smooth transitions is navigation between pages of your webapp.

In this article we will implement a typical master/detail movie search application that applies transitions...

How To Make An SVG Lava Lamp

Every now and then I am lucky enough to create a pen that people really like. SVG Lava Lamp is one of them - in fact I've had so many people asking about it that I decided to write this blog...

THREE.js Particles

Particles are a useful tool in adding a little extra juice to your THREE.js scene. They're good for all sorts of things: dust, fire, water, explosions, stars, fireflies -- basically dots of all...

Animation tip: Lerp

Ahhhhhhhhhhh I'm blogging again on CodePen! It's been a little while, my bad.

Today I want to talk about a little animation trick that I use all the time called lerp. Lerp is the nickname...


A few days ago I came across this creative studio called This Also. They just launched a new site. It not only showcases some of their amazing work but, also has this fun little loading...

Мой хак для улучшения отображения трансформации css

Суть довольно проста, нужно добавить к трансформируемому элементу блюр 0.


Живой пример тут

Результат на лицо:

enter image description here

enter image description here



{re-style} Twitter heart animation in full CSS

original codepen Twitter's Heart Full CSS by Nicolas Escoffier

Twitter's Heart Full CSS

three layer:


調整為 transform: scale()
以簡化 CSS rules,並可獲得較高效率的繪製


Export Animated GIF in 9VAe


What is 9VAe ?

Unique 2D animation free software which can export SVG and GIF animation.

Based on 2D keyframe animation such as Synfig Studio.

Lightweight and stable....

Animating the html5 Canvas -basics, and less basic stuff-

In this post, i'll try to explain a few basic techniques to animate 'things' in the canvas, to make them live and bounce.

Step one : Keep drawing

To animate, one need to draw a...

Animated SVG with Vivus

animate' class="post-image

Viva la Vivus

I’ve been meaning to work on my portfolio site for a while and I’ve finally found some time to put together some assets and elements I’d like to use. I...

9VAe Free SVG/GIF/APNG Animation editor: Introduction

What's 9VAe ?

9VAe is a powerful free software which can create 2D animation using vector graphics.

Use of shape tweening eliminates the need to create animation frame-by frame. Export SVG /...

9VAe Free SVG/GIF Animation editor: Download and Install

This article shows how to download and install 9VAe : Free SVG/GIF Animation editor.


Download (Click


in the following links)
Download from Vector how to
9va-win (Windows)...

9VAe Beginner Tutorial 0 - Overview

This tutorial shows how to use 9VAe : Free SVG/GIF Animation editor for beginners.


User Interface

Here is an overview of the 9VAe interface.


Tool Box

Editing Tool


CSS Only Hamburger Animation

The example

See the Pen 100% CSS Hamburger Animation by Grant Vinson (@vinsongrant) on CodePen.

What? An animated hamburger icon with no JavaScript?! Thats right, and it is pretty straightforward....

9VAe Beginner Tutorial 1 - Input, Select, Move, Resize...

Previous tutorial described an overview of the 9VAe interface. This tutorial shows how to create a quick example animation.


First Step


Let's make a simple animation shown above....

9VAe Beginner Tutorial 2 - AnimeCast, Time

This tutorial is a continuation of the tutorial " 9VAe Beginner Tutorial 1". This tutorial shows how to create an ' AnimeCast'.


Make AnimeCast and Rotate



9VAe Beginner Tutorial 3 - Edit AnimeCast, Loop

This tutorial is a continuation of the tutorial " 9VAe Beginner Tutorial 2". This tutorial shows how to edit the objects inside AnimeCast.


Edit AnimeCast


This tutorial is...

3D Animated Login

Anmiated Login using CSS3 and Javascript

I created a 3D animated login to become more feeling to a login form. This form is for "AJAX" based login, so the user will get feedback at all...

9VAe Beginner Tutorial 4 - Time Curve, Copy Pages, GIF

This tutorial is a continuation of the tutorial " 9VAe Beginner Tutorial 3". This tutorial describes 'Time Curve' and 'Copy Page'.


Time Curve, Copy Pages



9VAe's GIF/SVG Animation examples in Openclipart

What's 9VAe ?

9VAe is a powerful free software which can create 2D animation using vector graphics. Use of shape tweening eliminates the need to create animation frame-by frame. You can produce...

689 - Taiwan Flip

2016/01/16 開票結束後,
因為看到有網友做了這個很有趣的 689 翻轉 GIF
於是抽空用 CSS 實作看看~

然後綠色上層加上 opacity 的 animation 變化
不直接拿 background-color 做 animation 是因為要避免 re-paint ~

689 - Taiwan Flip


CSS Animation Steps() Basics

Sprite Sheet

In my latest blog post we'll discover how to create a sprite sheet based animation for a Tiny Tower inspired character using CSS Animation and the steps() timing function. Check...

Animating the Web

Less is more – in many ways

The original blog entry with example animations can be found on my website

As a mantra, I really like the saying "less is more". Because it applies in so many...

Html and SVG Animation curly line

<!DOCTYPE html>

Page Title


hello there! im lykakspars!

get some animation html? no... there is CSS animation!


And now There is Example script:

@keyframes NAMECLASSORNAMEHERE { 0% { transform: rotate(0deg); } }


SVG animation research & GSAP

Hi guys, this is my very first post and I would like to explain the process I followed to create this little SVG animation and what I learned on the way.

The goal of all this experiment was to...


Transitions and timing

I've been playing around with transitions and animations in CSS. Just trying to figure it all out. Subtle animations can really bring a site to life, as long as they are...

Анимация SVG Bodymovin

Попробовал давеча еще одну библиотеку для анимации SVG под названием BODYMOVIN. Данная библиотека идет вместе с экстеншеном для AE и предназначена для того, чтобы конвертить сделанную в АЕ анимацию...

Making Massive improvements to performance on all Modern Web platforms/browsers

When using CSS, there are many ways to increase performance, from using only repaintless animations to minimising the effect of a repainting animation such as colour changing. Of course there are...

Simple SVG Animation

The simplest way to animate SVG with just CSS!

SVG File

First off, prepare the SVG file you would like to use. In this case I'm going to use SAYS logo. You can get the SVG code from opening the...

Specifying Your Animation Units

I ran across a strange animation issue the other day. I created a bounce animation for a small arrow svg to prompt the user to scroll.

  .arrow { animation: arrow-bounce 1s ease-in-out infinite...

Improving UX through animation

I have always had a love of the moving image, whether that be in blockbuster films, indy shorts, animation or stop motion and gifs. This continues to be an inspiration to me and since getting more...

Make Barrel Fish animation from Openclipart SVG


This is an article which describes the process of making an animation from Openclipart's SVG.


Openclipart library is a collection of 100% license-free art that...

Animating SVG Charts built with React and D3

React, D3, SVG and Animation

One possible approach to creating data visualization charts is to use React and D3, where React handles building all of the SVG and D3 does the calculations required....

How to translate 9VAe?

What's the meaning ?

Replacement List

This function has been added to 9VAe (Ver.0.6.1).


Click [Text Input Button] (A), Input '#test'. Remember that the text to be replaced...

CSS3 Rainbowized Animations

Browser Power

I was playing around with CSS3 animations and what can be done with them, and I wanted to try to animate text that rotates its color through the color wheel. So, I made up the...

How to make a long animation with 9VAe


What is 9VAe ?

9VAe is a free 2D animation editor which can export Animated GIF , APNG, Animated SVG or QuickTime (9va-mac).

9VAe can import SVG vector illustrations.

9VAe can create...

Just Animate 1.0.0 beta!

I'm happy to say that after months at work Just Animate 1.0.0 is ready for beta! I realized a few months ago that I needed to do a major reworking of the API to make it a clear choice for...

How to create a game using SVG animations (Coloron example)

The idea of the game

I've used SVG animations for a while and had a pretty good understanding of how to use it for making animated sprites or website layouts. The combination of platforms like...

Write animation

Text Animation Message Writing

Hello ! my first pen here, I forked Stephen Scaff's Pen "Transmission: Glowing Text Animation" and...

Simple physics using basic web techniques

I've always been a sucker for basic physics. You know, the stuff introduced in elementary school, teaching us how physical objects can react and interact with the world around it. Recreating...

My SVG Animation Workflow

If you've ever worked with SVG you probably noticed the fact that the tools you have to use in the process are relatively unstable and can give you unpredictable results. There are a lot of...








过渡(transition) 必须要触发才能执行

动画(animation) 则不用触发也可以执行


声明动画名称:animation-name:lyj; css div{ width: 300px;...

How to Create Direction-Aware CSS-Only Hover Effects


A couple of tutorials for direction-aware CSS-only hover effects. Also shared on Medium.


These tutorials are intended for people who have at least a basic knowledge of HTML and...


This is a fun animation because it is quite simple and hypnotic. For each iteration hand one rotates 360 degrees once, hand two rotates twice, hand three rotates three times, and so on.


Animating SVG polygons


I got a lot of questions about how I created my pen "animating svg polygon points", so I decided to write a little tutorial. I made the pen trying to reverse engineer the...

Exploring Shaders

Learning Shaders by Example

This post is meant for developers who are very new to WebGL and would like to jump right into building things.

[[[pen slug-hash='YZqmWE' height='300'...

Create Element Transitions with Vue.js

Styling Underline Color

Vue.js (Vue) offers a simple way to transition between elements on the page, allowing for either simple transitions between CSS properties or complex animations (or both!)....

Making a Glowing Button

Glowing Button

Glowing Button, Just for Kicks

I got a wild hair the other day to make a glowing button. The basic idea was simple and straightforward: create a button that has a glowing look, as it...

Little Boxes that lag your sound card.

See the Pen Flexing your GPU with Little Boxes by Allie du Plooy (@AllieTheDemonHunter) on CodePen.

I had so much fun testing this after it took shape. Tweaking some of the settings (if you're...

Animating CSS Grid Layout properties

Note: This post will be constantly updated to reflect the most recent changes in browsers

According to the CSS Grid Layout Module Level 1 specification there are 5 animatable grid properties:


Focus Slide-In Effect

This cool effect uses articles as a container to hide images between transitions. It's a great way to bring images onto a scene with minimal CSS effort.

Images are put into articles and then...

Getting Started with CSS Animations

What Are CSS Animations?

You obviously know what an animation is - what I'm tryng to get at here are the different kinds of CSS Animations. There are the kind we already using without thinking - ...

I Rather Not Build It. Not Even For Funsies!

Once upon a time, I came across a web animation that was so massively cool, I wanted to recreate it. At the time, I was only coding for fun and had no knowledge of any front end tools to build such...

Sass Maps, Loops, and CSS word scrambling!

Note: To understand this tutorial, it definitely helps to have some preliminary knowledge of Sass/SCSS and Sass loops. We also use the checkbox hack in this tutorial, so knowing that can help too!


css rotation animation



Use the Random() Function in SASS to Create Unique CSS Animations

Brief Intro

In August I created a Pen animation based on a Dribble illustration by artist Razvan Vezetue. I was able to bring his Floating Island Illustration to "life" not just through...

GridBox Animation

See the Pen GridBox Animation by K.C.Ashish Kumar (@kcak11) on CodePen.

Cookie-counter to stop css animation on second visit.

I need a cookie-counter that stops a css animation after the first visit. How is this done, I've found this code that i think might be close to what I need. But I'm new to javascript. can...

water shape css wave

  <div class="waveWrapper waveAnimation"> 

Introduction to web animation

To start creating animation on the web that should run on 60 frames per second, we should first learn about how animation works in a browser:

Animation trigger, usually JavaScript or CSS animation....

Navbar With Animation


Hello Friends This is my First Post and I Create An animation

Click on the navbar button to change color of body....

Laazy cartoon spanner

hey checkout my cartoony spanner ,

Lazy cartoon spanner

😍 Studio Avatar Web😍

**** Bienvenu Welcome

**** Studio Avatar Web Présente

    Studio Avatar Web Présente   Pour Confection De Site Web  Création En Animation 3D   Martin Thériault Avatar Web  Web Développer Et Designer...

Connected Dots 2D Canvas Animation

Animation script that building random circles and lines in movement. You can control styles, objects sizes, and density. Animation adaptive. It was developed as a background decoration but its...

Elements Appearance 2D Canvas Animation

JavaScript object for an animated appearance of elements. You can control speed, positions, and appearance of elements of this animation. Animation adaptive. It was developed as a part of a landing...

Gooey Effect

Gooey Effect
<div class="stage-wrapper"> <div class="obj-1"> </div> <div class="obj-2"> </div> </div> <script...

My notes on SVG Animation (for beginners)

SVG Editor:

Affinity designer - one time payment

Adobe Illustrator


anime.js - open source and free

GreenSock - Super powerful animation library for all libraries ...

Css animation Or javascript

Animations can sometimes take the place of javascript and make it a little easier for us. for example:

dropdown menu



Download 9VAe for Android

9VAe is a powerful free software which can create 2D animation using vector graphics. Use of shape tweening eliminates the need to create animation frame-by frame. You can produce SVG / GIF / APNG...

Aestheticon's conceptual integrity

There's a concept I recently learned in regards to Software Engineering called "conceptual integrity." As it was taught, it is meant to apply to complex system design, and the idea is to have every...

Recreating the iPad Commercial Animation with CSS

Browsing the Internet, I saw the commercial for the new iPad Pro, and I really liked the animated words at the beginning:

I tried to recreate a similar animation just using HTML and CSS, and it...

WebGL enhanced drag slider tutorial with curtains.js (part 1)


Please note that this tutorial was originally posted on Medium here.

In this tutorial, we will learn how to build a drag slider in javascript, and enhance it with powerful WebGL...

WebGL enhanced drag slider tutorial with curtains.js (part 2)


Please note that this tutorial was originally posted on Medium here.

WebGL drag slider gif animation

This article is the second part of our tutorial. In the first part, we’ve created a...


<!DOCTYPE html>

Page Title


Mixin For Animation & Keyframes In SCSS / SASS

This tutorial will explain how to make Mixin For Animation & Keyframes in SCSS / SASS at the same time and I made them in 3 examples :


In Loops

In Loops With CSS Variables

In general,...