CSS Animation

Creating an Expanding Flex Cards using HTML, CSS, and JS Tutorial

Submitted by oretnom23 on

In this tutorial, I will show how to create Expanding Flex Cards for websites using HTML, CSS, and JavaScript. The tutorial aims to provide the students and new programmers with a reference for learning to build a creative collapsible content container using HTML, CSS, and JS. Here, I will be providing a simple web application or page script that demonstrates Expanding Flex Cards.

Creating an Infinity Loader using HTML and CSS Tutorial

Submitted by oretnom23 on

In this tutorial, you can learn how to create a simple Infinity Loader using HTML and CSS. The main purpose of this tutorial is to provide the students and beginners with a reference for understanding how the animated loader is made using CSS only, Here, I will be providing a script that demonstrates the infinity loader using only CSS and HTML.

CSS Animated Photo Banner

Submitted by GeePee on
This project will teach you how to animate a photo banner using css. There is no javascript code or jQuery plugin included. A simple yet interesting to learn project. This is like a image slider but we usually used a javascript or jQuery code. This time we can use css animation. Images are sliding from right to left continuously. Hope you learn from this.

Repeating Tile Background Animation in CSS

Submitted by GeePee on
This project will teach you on how to animate a repeating tile background using CSS keyframes. Using the css keyframes, tiled images will animate like a falling snow as seen on my example. It is depend on your style if you want to animate it from the right. Feel free to modify this project according to your preference. Hope you learn from this.

How to Create a Moving Website Background Using CSS Only

Submitted by argie on
This tutorial will teach you on how to create a moving background image using only CSS. I uses @keyframes rules i this tutorial to animate the background. To understand more about this rule, let me provide the definition and usage of this rule. with the @keyframes rule, you can create animations. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times. Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.
Subscribe to CSS Animation