Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Import Fade and Scale to HTML?
The scale() CSS function specifies a transformation that resizes a 2D element. Since the amount of scaling is defined by a vector, it can resize the vertical and horizontal dimensions at various scales. As a result, it yields a <transform-function> data type. It can be used with the transform property to transform an element in 2D or 3D space.
A two-dimensional vector characterizes this scaling transformation. Its coordinates specify the amount of scaling done in each direction.
Syntax
scale(sx) (or) scale(sx, sy)
sx: A number or percentage representing the scaling vector's abscissa.
sy: A number or percentage representing the scaling vector's ordinate.
A CSS fade transition is a visual effect that occurs when an element on the page, such as an image, text, or background, gradually appears or disappears. To achieve these effects, we can use CSS's transition or animation properties. When using the transition property, we can only specify an initial and final state — no intermediate points.
In this article we will discuss the methods to create a simple fade and scale animation in HTML and also look at some examples.
Using the CSS Animation Property
CSS animations are one of the three methods available for animating content in HTML. CSS animations serve a simple purpose. They give us the ability to animate CSS properties on the elements they affect. This allows us to do cool things like make things move, have things fade in and out, see things change colour, and so on.
The CSS animation property adds animation between styles. This property is a shorthand for the CSS properties listed below:
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
Example
In this example we will use CSS animation, defined by two keyframes. One with opacity set to 0 and one with opacity set to 1. Our animation is set to run for 6 seconds, and the name of the @keyframes rule that contains the actual animation details is fadeAndScale. Because our animation is essentially a transition between two states, we only have a from and to keyframe where we define the behavior of our animation.
This keyframe's contents formally define our observation, with the opacity set to 0 and the scale function set to 90%.At the end of the animation-duration, our text will be fully visible and its scale is set to 100% in the final state.
Another subtle effect within our already subtle animation is a slight bounce at the end where our text grows a little larger than it needs to and then snaps back into place when our text fades and scales in.
This is due to the easing function. Despite the fact that our keyframes defined a clear starting and ending value for our opacity and scale functions, the easing function controls the property values in between, often in novel ways that extend beyond the strictly defined boundaries set at the start and end of an animation.
<!DOCTYPE html>
<html>
<head>
<title>Fade and Scale</title>
<style>
body {
background-color: #F5F5F5;
margin: 50px;
margin: 25px 0 0 0;
}
#container {
margin:20px;
width: 400px;
height: 220px;
background-color:lightsalmon;
border-radius:10px;
}
h3 {
font-size: 70px;
color: #FFF;
padding: 20px 10px 10px 90px;
transform-origin: 50% 100%;
-webkit-text-stroke: 1px sienna;
animation-duration: .3s;
animation-name: fadeAndScale;
animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}
@keyframes fadeAndScale {
from {
opacity: 0;
transform: scale(.7, .7);
}
to {
opacity: 1;
transform: scale(1, 1);
}
}
</style>
</head>
<body>
<div id="container">
<h3>Hello<br>World</h3>
</div>
</body>
</html>
Using Transition and Transform Properties
The transition property is a shorthand for:
transition-property: Specifies the name of the CSS property that will be affected by the transition effect.
transition-duration: Specifies how many seconds or milliseconds it takes for the transition effect to complete.
transition-timing-function: Specifies the transition effect's speed curve.
transition-delay: Defines the time interval after which the transition will begin.
Syntax
transition: property duration timing-function delay|initial|inherit;
The transform property transforms an element in 2D or 3D space. This property enables us to rotate, scale, move, skew, and so on.
Syntax
transform: none|transform-functions|initial|inherit;
Example
In this example, the body is initially set to opacity 0 on a smaller scale, and the transition and transform properties are later used for animation. The onload event is used to set the opacity to 1 and the scale to (1,1) when the page is loaded. Because of the transition and transform properties, adjusting the opacity and scale now appears to fade in the page while increasing in size. The transition property allows us to specify the time for the fade in and scale change.
<!DOCTYPE html>
<html>
<head>
<title>Fade and Scale</title>
<style>
body {
opacity: 0;
transition: opacity 10s, transform 10s;
transform: scale(0.5,0.5);
}
div {
background-color: aquamarine;
width: 200px;
height: 80px;
padding: 10px 40px 20px 90px;
}
</style>
</head>
<body onload="fadeandscale()">
<div>
<h2>Hello World!</h2>
</div>
<script>
function fadeandscale() {
document.getElementsByTagName('body')[0].style.opacity='1';
document.getElementsByTagName('body')[0].style.transform='scale(1,1)';
}
</script>
</body>
</html>
50 Views
