1div {
2 transition: all 0.5s ease;
3 background: red;
4 padding: 10px;
5}
6div:hover {
7 background: green;
8 padding: 20px;
9}
1/* Answer to: "css transition opacity" */
2
3/*
4 CSS transitions allows you to change property values smoothly,
5 over a given duration.
6*/
7
8.myClass {
9 vertical-align: top;
10 transition: opacity 0.3s; /* Transition should take 0.3s */
11 -webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
12 opacity: 1; /* Set opacity to 1 */
13}
14
15.myClass:hover {
16 opacity: 0.5; /* On hover, set opacity to 2 */
17}
18
19/*
20 From `opacity: 1;` to `opacity: 0.5;`, the transition time should
21 take 0.3 seconds as soon as the client starts to hover over the
22 element.
23*/
1<style>
2div {
3 background-color: blue;
4 padding: 40px;
5 color: white;
6 cursor: pointer;
7 -webkit-transition: all 0.5s 0s ease;
8 -moz-transition: all 0.5s 0s ease;
9 -o-transition: all 0.5s 0s ease;
10 transition: all 0.5s 0s ease;
11}
12/*transition: property duration timing-function delay|initial|inherit;*/
13
14.hidden {
15 visibility: visible;
16 opacity: 0.1;
17 max-width: 12%;
18}
19
20.hidden:hover {
21 visibility: visible;
22 opacity: 1;
23 max-width: 100%;
24}
25</style>
26
27<div class="hidden">HOVER ME!</div>
1/* Transition Transform */
2.section:hover {
3 transform: translateX(0px) translateY(75px);
4}
5
6.section {
7 transition: transform 500ms ease-in-out 25ms;
8}
1/*
2To create a transition effect, you must specify three things:
3 transition: (transition-property) (transition-duration) (transition-delay) (transition-timing-function)
4 transition: all 0.5s ease-out
5
6transition-property:
7 Specifies the name of the CSS property the transition effect is for, by default it's none
8 the property could be: width, height, background-color, color, font-size, opacity etc, by applying "all" keyword, it applies on all properties
9 transition-property: background-color; --> aply on background only
10 transition-property: all; --> apply on all
11
12transition-duration:
13 Specifies how many seconds or milliseconds a transition effect takes to complete
14
15transition-delay:
16 Specifies a delay (in seconds) for the transition effect
17
18transition-timing-function property
19 ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
20 ease-in - specifies a transition effect with a slow start
21 ease-out - specifies a transition effect with a slow end
22 ease-in-out - specifies a transition effect with a slow start and end
23*/
24
25/* transition scale example*/
26.trans_scale {
27 transition-delay: 0s;
28 transition-property: box-shadow, background-color, transform;
29 transition-duration: 0.3s;
30 transition-timing-function: ease-out;
31 /* OR */
32 /* transition: all 0.3s 0s ease-out; */
33 /* transition: 0.3s;
34 /* transition: transform 0.5s; */
35}
36
37.trans_scale:hover {
38 transform: scale(1.02, 1.03);
39 box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
40 background-color: #f2efe3ff;
41}
42