Basic introduction Transform property

In the new CSS3 transform properties, you can make the transition effect element in the transformation process, achieve the basic animation.

transition的语法：transition： transition-property || transition-duration ||

transition-timing-funciton || transition-delay ；

Explain the parameters have the following values:

<Transition-property>: Define the transition properties;

<Transition-duration>: time needed to define the transition process;

<Transition-timing-function>: define the transition;

<Transition-delay>: defining the start of the transition delay time;

Using a set of attribute definition transition transition effects, the above four parameters. Intermediate transition property shorthand separated by spaces. Transition effect can also be defined simultaneously two or more groups, separated by commas between the groups.

html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<link rel="stylesheet" href="../CSS/transition.css">
</head>
<body>

</body>
</html>

css code:

.ty{
width: 200px;
height:200px;
background-color: red;
margin: auto;
transition:background-color .5s ease-in .5s;
}
.ty:hover{
background-color: blue;
}

Note that one of the transition property, where the use of shorthand. Describes the order of sequential opening to define four attributes, using an intermediate of the hover tag. The effect is shown, when the mouse is moved to the top when div. After five seconds faster the background color from red to yellow results from slow to within five seconds.

Key: CSS3 transition is an element gradually change from one style to another effect. To achieve this, two things must be defined:

I want to add the effect of CSS properties
Specify the duration of the effect.

Basic introduction Transform property

Basic introduction Transform property

In the new CSS3 transform properties, you can make the transition effect element in the transformation process, achieve the basic animation.

transition的语法：transition： transition-property || transition-duration ||

transition-timing-funciton || transition-delay ；

Explain the parameters have the following values:

<Transition-property>: Define the transition properties;

<Transition-duration>: time needed to define the transition process;

<Transition-timing-function>: define the transition;

<Transition-delay>: defining the start of the transition delay time;

Using a set of attribute definition transition transition effects, the above four parameters. Intermediate transition property shorthand separated by spaces. Transition effect can also be defined simultaneously two or more groups, separated by commas between the groups.

html code:

Key: CSS3 transition is an element gradually change from one style to another effect. To achieve this, two things must be defined:

I want to add the effect of CSS properties

Specify the duration of the effect.

Guess you like