Transition is a shorthand property for transition-property
, transition-duration
, transition-timing-function
, transition-delay
. CSS transitions allow you to change property values smoothly over a given duration.
<!DOCTYPE html>
<html>
<head>
<title>Transition Test</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
div:hover{
width: 300px;
height: 300px;
background-color: blue;
transition: all 2s;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
transition-delay
transition-delay
specifies the duration to wait before starting a property's transition effect when its value changes.
<!DOCTYPE html>
<html>
<head>
<title>Transition Test</title>
<style>
body{
display: flex;
}
div{
width: 100px;
height: 100px;
background: red;
font: bold;
color: white;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.first{
transition-delay: 0s;
}
.second{
transition-delay: 1s;
}
.third{
transition-delay: 2s;
}
div:hover{
background: blue;
}
</style>
</head>
<body>
<div class="first">0초</div>
<div class="second">1초</div>
<div class="third">2초</div>
</body>
</html>
If the value of transition-delay is 0(default value), it will begin the transition effect immediately. You can use s(second)and ms(millisecond) to set the delay. You can also give negative value for the delay. If it has the negative value for it, it will start the effect immediately but from the middle of the effect.(If the transition-duration is set to -1s, it will effect immediately but will show the effect that's 1s passed.(negative value starts an animation before 0 would, but the animation is hidden, until the time the value points has elapsed.)
transition-property
div {
transition: width 2s, height 4s;
}
transition-property
specifies the name of the CSS property the transition effect is for.
property values for transition-property
:
- all: all properties that can transition will
- none: no properties will transition
- property: specify the name of css property that you can give transition effect.
transition-property: width, height;
- initial: giving default value for the property.
- inherit: takes parent's value.
<!DOCTYPE html>
<html>
<head>
<title>transition-property property예제</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition-property: width, height; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-property: width, height;
transition-duration: 2s;
}
div:hover {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transition-property: width, height
is specified so width and height expand gradually during 2s but background-color
changes to blue drastically.
transition-timing-function
transition-timing-function
specifies the speed curve of the transition effect.
- Values for timing-function
- ease: equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the transition, slowing back down at the end.
- linear: equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), transitions at an even speed.
- ease-in: equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the transition speed increasing until complete.
- ease-out: equal to cubic-bezier(0, 0, 0.58, 1.0), starts transitioning quickly, slowing down the transition continues.
- ease-in-out: equal to cubic-bezier(0.42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again.
- step-start: it's same as
steps(1, start)
- step-end: it's same as
steps(1, end)
- steps(int, start|end): if you put integer at int, specify start and end. Then it will cut off at stat or end.
- cubic-bezier(n,n,n,n): lets you define your own values in a cubic-bezier function
- initial: giving default value for the property.
- inherit: takes parent's value, etc. Most timing functions use .
- ease-out: equal to cubic-bezier(0, 0, 0.58, 1.0), starts transitioning quickly, slowing down the transition continues. timing-function example
transition
You can also write all of them at once using transition
Also, when you go to developer's tool, you can check these
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
CSS transition properties can be specified one by one like above or by using the shorthand property transition like below.
div {
transition: width 2s linear 1s;
}
transform
transform lets you rotate, scale, move, skew, or translate an element(2d, 3d transformation to an element), etc.
scale
scale is used when you resize the element. The difference with using width, height is that if you change width and height, the element get bigger from right, bottom but if you use scale, it gets bigger from the centre.
scale(1)
: 1 means 100% here. If you write lager number than 1, then it will change the size of element.
<!DOCTYPE html>
<html>
<head>
<title>Transition Test</title>
<style>
.box{
width:100px;
height:100px;
background:dodgerblue;
transition:all 1s;
}
.box:hover{
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>
scale(2) is used above, so it will get twice bigger. scale
can get two values which is x and y. scale(x,y)
(if you write only one value it means the same value for x and y)
rotate
it rotates an element around the a fixed point on 2D plane,, without deforming it.
div {
transform:rotate(360deg)
/* this also can be used as transform:rotate(1turn). */
}
<!DOCTYPE html>
<html>
<head>
<title>Transition Test</title>
<style>
.box{
width:100px;
height:100px;
background:dodgerblue;
transition:all 1s;
}
.box:hover{
transform:rotate(360deg);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>
translate
translate
repositions an element in horizontal and/or vertical directions.
It can have single value
transform: translate(200px);
transform: translate(50%);
or Double value - translate(x,y)
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
if you give negative number, it will move to the opposite direction.
<!DOCTYPE html>
<html>
<head>
<title>Transition Test</title>
<style>
.box{
width:100px;
height:100px;
background:dodgerblue;
transition:all 1s;
}
.box:hover{
transform:translate(100px,100px);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>
skew
It defines a transformation that skews an element on an element on 2D plane. It distorts each poing within an element by certain angle in the horizontal and vertical directions. The effect is as if you grabbed each corner of the element and pulled them along a certain angle.
It uses deg(degree) like rotate.
transform: skew(10deg);
transform: skew(15deg, 15deg);
<!DOCTYPE html>
<html>
<head>
<title>Transition Test</title>
<style>
.box{
width:100px;
height:100px;
background:dodgerblue;
transition:all 1s;
}
.box:hover{
transform:skew(40deg);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>
transform-origin
transform-origin
sets the origin for an element's transformations.
It can have values of left, right, top, bottom, center or can specify it with numbers like transform-origin: 0, 0;
(x,y)
transform-origin: center;
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px;
<!DOCTYPE html>
<html>
<head>
<title>Transition Test</title>
<style>
.box{
width:100px;
height:100px;
background:dodgerblue;
transition:all 1s;
transform-origin:left top;
}
.box:hover{
transform:rotate(360deg);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>
Practice - Button
Code for button above
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>button</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,800;1,700&display=swap');
/* hover/before/transform/(animation)/transition */
.btn {
position: relative;
width: 200px;
height: 50px;
font-weight: 700;
color: #ff3550;
background-color: white;
border: 1px solid #ff3550;
border-bottom: 10px solid #ff3550;
border-radius: 24px;
font-size: 23px;
letter-spacing: 1.2px;
text-transform: uppercase;
font-family: 'Public Sans', sans-serif;
text-align: center;
padding-top: 20px;
cursor: pointer;
margin: 100px;
transition: all .5s;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
padding-top: 20px;
top: -23px;
left: 0;
width: 200px;
height: 10px;
background: #ff3550;
transform: translateY(300px);
transition: all .5s;
}
.btn:hover::before {
content: '';
cursor: pointer;
transform: translateX(0);
}
.btn:hover {
color: #ff3550;
border: 1px solid white;
z-index: 1;
transform: scale(0.97);
}
</style>
</head>
<body>
<div class="btn">Click Me!</div>
</body>
</html>
When to use translate or position.
We can move element's coordinates using position. Isn't it the same for the translate?
- If you are positioning elements for static website, you can use
position
but it's better to usetranslate
if it's for an animation or if you have to move elements dynamically.
Top comments (0)