- CSS Introduction
- CSS - Overview
- CSS - Understanding the Basics : Syntax, Selectors, and Declarations
- CSS - Using Inline, Internal, and External Techniques to Integrate CSS into HTML
- CSS - Complete working code of using CSS into HTML
- CSS The Box Model
- CSS - Components of the CSS Box Model
- CSS - Managing Layout with the CSS Box Model
- CSS - Box Model Properties
- CSS Styling Text and Fonts
- CSS - Color, alignment, decoration, and transformation of text
- CSS - Font properties : Family, size, weight, and style.
- CSS - Web-Safe Fonts and Custom Fonts Integration
- CSS - Web-Safe Fonts
- CSS - Custom Fonts Integration
- CSS - Code Sample : Using Web-Safe and Custom Fonts
- CSS Layout Technique
- CSS - Display properties and Box manipulation
- CSS - Display Properties
- CSS - Box Manipulation
- CSS - Code Sample : Display Properties and Box Manipulation
- CSS - CSS Layout Technique : Positioning Elements
- CSS - Static Positioning
- CSS - Relative positioning
- CSS - Absolute Positioning
- CSS - Fixed Positioning
- CSS - Sticky Positioning
- CSS - Complete working code for positioning elements
- CSS - Flexbox : Basics, alignment, and building a layout with Flexbox
- CSS - Flexbox Basics
- CSS - Alignment in Flexbox
- CSS - Building a Layout with Flexbox
- CSS - Grid : Grid basics, creating layouts with grid-template columns, rows, and areas
- CSS - Grid Basics
- CSS - Creating Layouts with Grid Template Columns and Rows
- CSS - Creating Layouts with Grid Areas
- CSS Transitions and Animations
- CSS - Transitions : Property, duration, timing function.
- CSS - Code for Transition
- CSS - Animations : Keyframes and Animation Properties
- CSS - Code for Animation
- CSS Advanced Styling
- CSS - Pseudo-classes and Pseudo-elements
- CSS - Styling Lists, Tables, and Forms
- CSS - Creating and Styling Navigation Bars and Dropdown Menus
- CSS Visual Enhancements
- CSS - Backgrounds: Colors, Images, and Gradients
- CSS - Borders and Box Shadows for Depth and Emphasis
- CSS - Using Transitions and Animations for Dynamic Effects
- CSS Responsive Web Design
- CSS - Responsive Images and Videos for Faster Page Loads
- CSS - Media Queries for Device-Specific Styling
- CSS - Mobile-First versus Desktop-First Strategies
- CSS Transforms and Effects
- CSS - 2D and 3D Transforms : Rotate, Scale, Translate, and Skew
- CSS - Visual Effects: Box-Shadow, Text-Shadow, Blend Modes
- CSS Advanced Features
- CSS - Variables for Maintainable Style Sheets
- CSS - Advanced Selectors and Combinator Usage
- CSS Advanced Layout Techniques
- CSS - Multi-column Layouts, Flexbox, and Grid Advanced Techniques
- CSS - Overlapping and Layering with z-index
- CSS SASS
- CSS - Introduction to SASS/SCSS : Variables, Nesting, and Mixins
- CSS - Organizing CSS with Partials and Imports
- CSS - Advanced SASS : Functions, Loops, and Conditionals
- CSS - Functions
- CSS - Conditionals
- CSS - Loops
- CSS Working with SVGs and Icons in Web Design
- CSS - Implementing Scalable Vector Graphics and Icons in Web Design
- CSS - Styling and Animating SVGs with CSS
- CSS Best Practices and Optimization
- CSS - Writing Efficient, Maintainable, and Scalable CSS
- CSS - Methodologies like BEM for Organizing CSS
- CSS - Performance Optimization : Minification, Concatenation, and CSS Sprites
- CSS Sample Project
- CSS - Create a home page with HTML and CSS
- CSS - HTML Structure
- CSS - Styling
- CSS - Conclusion
CSS - Animations : Keyframes and Animation Properties
Animations in CSS
One effective technique to give web objects movement and vitality is with CSS animations. An animation, as opposed to a transition, can have numerous phases of change, not just a beginning and a conclusion, and can alter one or more CSS attributes continually. CSS animations can be managed using several animation attributes and @keyframes tags.
Keyframes
CSS animations start with @keyframes. It serves the purpose of specifying the styles that will be used throughout the animation at different stages. For every point in the animation sequence, from start (0%) to end (100%), there is a corresponding percentage that defines it. Keyframe counts are unlimited as long as they serve the intended purpose.
Animation Properties
CSS animation properties determine the behavior of an animation. Important animation properties to consider are;
- animation name; Connects the animation to a set of @keyframes.
- animation duration; Specifies the duration it takes for the animation to complete one cycle.
- animation timing function; Controls how the animation progresses during its duration, such, as linear, ease in or ease out.
- animation delay; Pauses the start of the animation.
- animation iteration count; Indicates how times the animation will repeat.
- animation direction; Decides whether the animation should reverse its direction.
- animation fill mode; Defines which values are applied by the animation before and after it runs.
