transition transform
/* Transition Transform */
.section:hover {
transform: translateX(0px) translateY(75px);
}
.section {
transition: transform 500ms ease-in-out 25ms;
}transition transform
/* Transition Transform */
.section:hover {
transform: translateX(0px) translateY(75px);
}
.section {
transition: transform 500ms ease-in-out 25ms;
}transition css
div:hover {
background-color: #000;
transition: background-color 400ms;
}transition syntax css
transition: property duration transition-timing-function delay;
/*Shorthand Property*/transition css
/*
To create a transition effect, you must specify three things:
transition: (transition-property) (transition-duration) (transition-delay) (transition-timing-function)
transition: all 0.5s ease-out
transition-property:
Specifies the name of the CSS property the transition effect is for, by default it's none
the property could be: width, height, background-color, color, font-size, opacity etc, by applying "all" keyword, it applies on all properties
transition-property: background-color; --> aply on background only
transition-property: all; --> apply on all
transition-duration:
Specifies how many seconds or milliseconds a transition effect takes to complete
transition-delay:
Specifies a delay (in seconds) for the transition effect
transition-timing-function property
ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
*/
/* transition scale example*/
.trans_scale {
transition-delay: 0s;
transition-property: box-shadow, background-color, transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
/* OR */
/* transition: all 0.3s 0s ease-out; */
/* transition: 0.3s;
/* transition: transform 0.5s; */
}
.trans_scale:hover {
transform: scale(1.02, 1.03);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
background-color: #f2efe3ff;
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
