Revision:
The browser fills in that state change with a sequence of in-between frames : it has a beginning and an end state.
We often see transitions used on hover states, or when information on a page is added or removed. The hover states might be a subtle change in font color, and information on the page might fade from invisible to visible.
In other words, transitions are micro animations that make a website look advanced and smooth at the same time.
When adding a transition to any element of a website, just add code - like "transition: 1s all" - to the main class of element.
After this whatever property you want to change, change it in pseudo classes - like :hover, :active, :focus , etc.
<div class=container>
<button class=button-shape>Hover me!!</button>
<button class=clickable-button>Click me!!</button>
<button class=expand-button>Expand me by hovering</button>
</div>
<style>
.container {height: 20vh; display: flex; flex-direction: row; justify-content:
space-around;align-items: center;}
.button-shape {border: none; background: red; padding: 0.8vw 1vw; border-radius:
1vw; font-size: 1vw; transition: all 500ms;}
.button-shape:hover {border: none; padding: 0.6vw 0.8vw; font-size: 0.6vw;
background: blue; border-radius: 4vw;color: white;}
.clickable-button {border: none; background: cyan; padding: 0.6vw 1vw;
border-radius: 1vw; box-shadow: .3vw .3vw grey; transition: all 100ms;}
.clickable-button:active {box-shadow: none; opacity: 0.6;}
.expand-button { border: none; background: burlywood;padding: 0.6vw 1vw;
border-radius: 1vw; transition: all 300ms;
transform-origin: left;}
.expand-button:hover { transform: scaleX(1.5); box-shadow: .3vw .3vw grey;}
</style>
The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
the scaleY() method increases or decreases the height of an element.
the scaleX() method increases or decreases the width of an element.
The skew() method skews an element along the X-axis and Y-axis by the given angles. Skewing can be done for X and Y-axis with skewX() and skewY()
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.
There are three key advantages to CSS animations over traditional script-driven animation techniques:
1/ they're easy to use for simple animations; you can create them without even having to know JavaScript;
2/ the animations run well, even under moderate system load; simple animations can often perform poorly in JavaScript; the rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3/ letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.
To create a CSS animation sequence, the following has to be done:
you style the element you want to animate with the animation property or its sub-properties; this let you configure the timing, duration, and other details of how the animation sequence should progress;
the configuration of actual appearance of the animation, is done using the @keyframes at-rule.
The sub-properties of the animation property are:
animation-delay: specifies the delay between an element loading and the start of an animation sequence and whether the animation should start immediately from its beginning or partway through the animation.
animation-direction: specifies whether an animation's first iteration should be forward or backward and whether subsequent iterations should alternate direction on each run through the sequence or reset to the start point and repeat.
animation-duration: specifies the length of time in which an animation completes one cycle.
animation-fill-mode: specifies how an animation applies styles to its target before and after it runs.
animation-iteration-count: specifies the number of times an animation should repeat.
animation-name: specifies the name of the @keyframes at-rule describing an animation's keyframes.
animation-play-state: specifies whether to pause or play an animation sequence.
animation-timing-function: specifies how an animation transitions through keyframes by establishing acceleration curves.
The animation shorthand property is useful for saving space and applies an animation between styles. It is a shorthand for: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
Syntax examples:
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;
/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;
The animation property is specified as one or more single animations, separated by commas. Each individual animation is specified as:
zero, one, or two occurrences of the <time> value;
zero or one occurrences of the following values: <single-easing-function>, <single-animation-iteration-count>, <single-animation-direction>, < single-animation-fill-mode>, <single-animation-play-state>.
an optional name for the animation, which may be none, a <custom-ident>, or a <string>
The order of time values within each animation definition is important: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.
The order of other values within each animation definition is also important for distinguishing an animation-name value from other values. If a value in the animation shorthand can be parsed as a value for an animation property other than animation-name, then the value will be applied to that property first and not to animation-name. For this reason, the recommended practice is to specify a value for animation-name as the last value in a list of values when using the animation shorthand; this holds true even when you specify multiple, comma-separated animations using the animation shorthand.
An animation-name value is not required to be declared in the animation shorthand property. If no name exists, there is no animation to apply on any of the properties.
When the animation-duration value is omitted from the animation shorthand property, the value for this property defaults to 0s. In this case, the animation will still occur (the animationStart and animationEnd events will be fired) but no animation will be visible.
After the animation's timing is configured, the appearance of the animation needs to be defined. This is done by establishing one or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a <percentage> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation.
Because these two times are so important, they have special aliases : "from" and "to". Both are optional.
If from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.
Optionally, additional keyframes that describe intermediate steps between the start and end of the animation can be included.
code:
<div class="bg1">
<div class="sun1"></div>
</div>
<style>
.bg1{overflow: hidden; background-color:lightblue; display: flex; justify-content: center; width: 30vw; height: 30vh;}
.sun1 {background-color: yellow; border-radius: 50%; height: 10vh; aspect-ratio: 1 / 1; animation: 10s linear 0s infinite
alternate sun-rise;}
@keyframes sun-rise {
from {/* pushes the sun down past the viewport */ transform: translateY(50vh);}
to { /* returns the sun to its default position */ transform: translateY(0);}
}
</style>
code:
<div class="bg2">
<div class="sun2"></div>
</div>
<style>
.bg2{overflow: hidden; background-color: lightblue; display: flex; justify-content: center; width: 30vw; height:30vh;}
.sun2 { background-color: yellow; border-radius: 50%; height: 10vh; aspect-ratio: 1 / 1; animation: 14s linear 0s infinite
alternate animating-multiple-properties;}
@keyframes animating-multiple-properties {
from {transform: translateY(40vh); background-color: red; filter: brightness(75%);}
to {transform: translateY(0);background-color: orange;/* unset properties
i.e. 'filter' will revert to default values */}
}
</style>
code:
<div class="bg3">
<div class="sun3"></div>
</div>
<style>
.bg3 {overflow: hidden; background-color: lightblue; display: flex; justify-content: center; width: 30vw; height: 30vh;}
.sun3 {background-color: yellow; border-radius: 50%; height: 10vh; aspect-ratio: 1 / 1; /* multiple animations are separated by
commas */ animation: 18s linear 0s infinite alternate rise, /* animation parameters are set independently */ 24s linear 0s
infinite psychedelic;}
@keyframes rise {
from {transform: translateY(50vh);}
to {transform: translateY(0);}
}
@keyframes psychedelic {
from {filter: hue-rotate(0deg);}
to {filter: hue-rotate(360deg);}
}
</style>
code:
<div class="bg4">
<div class="sun4"></div>
</div>
<style>
.bg4 {overflow: hidden; background-color: lightblue; display: flex; justify-content: center; width: 30vw; height: 30vh;}
.sun4 {background-color: yellow; border-radius: 50%; height: 10vh; aspect-ratio: 1 / 1; /*animations declared later in the
cascade will override the properties of previously declared animations */ animation: 4s linear 0s infinite alternate rise,
/* bounce 'overwrites' the transform set by rise */ 4s linear 0s infinite alternate bounce; /* hence the sun only
moves horizontally */ }
@keyframes rise {
0% {transform: translateY(40vh);}
50% {transform: translateY(0);}
}
@keyframes bounce {
50% {transform: translateX(-20vw);}
100% {transform: translateX(30vw); }
}
</style>
code:
<div class=clouds>
<div class=stars>
<div class=star-1>
<svg version="1.1" id="Capa_1" fill="white" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="37.286px"
height="37.287px" viewBox="0 0 37.286 37.287" xml:space="preserve">
<g>
<path d="M36.683,16.339l-7.567,7.377l1.786,10.417c0.128,0.75-0.182,
1.509-0.797,1.957c-0.348,0.253-0.762,0.382-1.176,0.382 c-0.318,0-0.638-
0.076-0.931-0.23l-9.355-4.918l-9.355,4.918c-0.674,0.355-1.49,0.295-2.107
-0.15 c-0.615-0.448-0.924-1.206-0.795-1.957l1.787-10.417L0.604,16.34c-
0.547-0.531-0.741-1.326-0.508-2.05 c0.236-0.724,0.861-1.251,1.615-1.
361l10.459-1.521l4.68-9.478c0.335-0.684,1.031-1.116,1.792-1.116 c0.763,
0,1.456,0.432,1.793,1.115l4.68,9.478l10.461,1.521c0.752,0.109,1.379,
0.637,1.611,1.361 C37.425,15.013,37.226,15.808,36.683,16.339z" />
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
</div>
<div class=star-2>
<svg version="1.1" id="Capa_1" fill="white" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="37.286px"
height="37.287px" viewBox="0 0 37.286 37.287" xml:space="preserve">
<g>
<path d="M36.683,16.339l-7.567,7.377l1.786,10.417c0.128,0.75-0.182,
1.509-0.797,1.957c-0.348,0.253-0.762,0.382-1.176,0.382 c-0.318,0-0.638
-0.076-0.931-0.23l-9.355-4.918l-9.355,4.918c-0.674,0.355-1.49,0.295-
2.107-0.15 c-0.615-0.448-0.924-1.206-0.795-1.957l1.787-10.417L0.604,
16.34c-0.547-0.531-0.741-1.326-0.508-2.05 c0.236-0.724,0.861-1.251,
1.615-1.361l10.459-1.521l4.68-9.478c0.335-0.684,1.031-1.116,1.792-
1.116 c0.763,0,1.456,0.432,1.793,1.115l4.68,9.478l10.461,1.521c0.
752,0.109,1.379,0.637,1.611,1.361 C37.425,15.013,37.226,15.808,
36.683,16.339z" />
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
</div>
</div>
<div class=sun></div>
</div>
<style>
.clouds {background: black; animation: 14s 0s infinite alternate dayNight; height: 30vh; display: flex;justify-content: center; width: 100%;}
.stars {position: relative;}
.star-1 {animation: 14s 0s infinite alternate star-twinkle; position: relative; right: 10vw; top: 5vw;}
.star-2 {animation: 14s 0s infinite alternate star-twinkle; position: relative; left: 10vw; top: 5vw;}
.sun {height: 6vw; width: 6vw; background: yellow; border-radius: 50%; animation: 14s 0s infinite alternate falling;}
@keyframes star-twinkle {
0% {transform: scale(1);}
100% {transform: scale(0); }
}
@keyframes falling {
0% {transform: translateY(50vh); background: #ffe484; opacity: 0;}
<!-- 50% {background: #fc9601;transform: translateY(25vh);} -->
100% {transform: translateY(0vh);background: #ffcc33; }
}
@keyframes dayNight {
0% {background: black;}
50% {background: #6b4984;}
100% {background: white;}
}
</style>
Scroll-driven animations allow you to control the playback of an animation based on the scroll position of a scroll container. As you scroll up or down, the animation scrubs forward or backward.
Additionally, with scroll-driven animations you can also control an animation based on an element's position within its scroll container. This allows you to create interesting effects such as a parallax background image, scroll progress bars, and images that reveal themselves as they come into view.
This API supports a set of JavaScript classes and CSS properties that allow you to easily create declarative scroll-driven animations.
To drive a CSS Animation by scroll use the new scroll-timeline, view-timeline, and animation-timeline properties.
To drive a JavaScript Web Animations API, pass a ScrollTimeline or ViewTimeline instance as the timeline option to Element.animate().
These new APIs work in conjunction with existing Web Animations and CSS Animations APIs, meaning that they benefit from the advantages of these APIs. That includes the ability to have these animations run off the main thread. You can now have silky smooth animations, driven by scroll, running off the main thread, with just a few lines of extra code.
To create an animation in CSS, define a set of keyframes using the @keyframes at-rule. Link it up to an element using the "animation-name property" while also setting an "animation-duration" to determine how long the animation should take.
There are more animation-* longhand properties available - animation-easing-function and animation-fill-mode just to name a few - which can all be combined in the animation shorthand.
In JavaScript, the Web Animations API can be used to achieve exactly the same. You can do this by either creating new Animation and KeyFrameEffect instances, or use the much shorter "Element animate()"" method.
By default, an animation attached to an element runs on the document timeline. Its origin time starts at 0 when the page loads, and starts ticking forwards as clock time progresses. This is the default animation timeline and, until now, was the only animation timeline you had access to.
The Scroll-driven Animations Specification defines two new types of timelines that you can use:
Scroll Progress Timeline : a timeline that is linked to the scroll position of a scroll container along a particular axis.
View Progress Timeline : a timeline that is linked to the relative position of a particular element within its scroll container.
Scroll Progress Timeline
This is an animation timeline that is linked to progress in the scroll position of a scroll container - also called scrollport or scroller - along a particular axis. It converts a position in a scroll range into a percentage of progress.
The starting scroll position represents 0% progress and the ending scroll position represents 100% progress.
A Scroll Progress Timeline is often abbreviated to simply “Scroll Timeline”.
View Progress Timeline
This type of timeline is linked to the relative progress of a particular element within a scroll container. Just like a Scroll Progress Timeline, a scroller's scroll offset is tracked. Unlike a Scroll Progress Timeline, it's the relative position of a subject within that scroller that determines the progress.
A View Progress Timeline begins from the moment a subject starts intersecting with the scroller and ends when the subject stops intersecting the scroller.
View Progress Timeline is often abbreviated to simply “View Timeline”. It is possible to target specific parts of a View Timeline based on the subject's size.