Home > Article > Web Front-end > What is css transition? A brief introduction to transition elements in css
What is css transition? A brief introduction to transition elements in css
- 不言Original
- 2018-08-10 10:28:493156browse
The content of this article is about what is css transition? A brief introduction to transition elements in CSS has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
css transition: the effect of elements gradually changing from one style to another.
Conditions required for transition:
1. The element being transitioned must have a css style.
2. There must be transition time.
The following are the attributes of the transition element:
transition: shorthand attribute, used to set four transition attributes in one attribute.
transition-property: Specifies the name of the CSS property that applies the transition.
transition-duration: The time taken for the transition.
transition-timing-function: The time curve of the transition element. The attribute values are linear (a process of uniform speed), ease (a process of gradually slowing down), ease-in (a process of acceleration), ease-out ( The process of deceleration), cubic-bezier (0,0,0,0) Bezier curve
transition-delay: Specify the start time of a transition (that is, how long it takes to start execution), the default is 0
We generally use the transition effect after the mouse slides over or clicks. Here I take the mouse slide over as an example:
1. The width changes to 120% of the original value after the mouse slides over
2. Add shadow when the mouse slides over
3. When the mouse slides over, you can achieve translation, rotation, scaling, distortion and other effects.
transform(2D conversion)
Attribute values include: translate(translation), rotate(rotation), scale(zoom), skew(distortion)
html part
<body> <div id="box"> </div> </body>
css part:
#box{
height: 200px;
width: 200px;
border:1px solid #000;
/*1.鼠标滑过宽度变为原来的120%*/
transition-property: width; /*所要过渡的属性名称*/
transition-duration: 1s;/*过渡的时间*/
transition-timing-function: linear;/*过渡的时间曲线*/
transition-delay: 0;/*过渡的开始时间*/
/*2.鼠标滑过加上阴影*/
transition-property: box-shadow; /*所要过渡的属性名称*/
transition-duration: 1s;/*过渡的时间*/
transition-timing-function: linear;/*过渡的时间曲线*/
transition-delay: 0;/*过渡的开始时间*/
/*以上写法比较麻烦所以可以简写成：*/
transition: all 1s linear 0s; /*一般用 all 代替所有要过渡的属性名称*/
-ms-transition: all 1s linear 0s;/*兼容IE10+*/
-moz-transform: all 1s linear 0s;/*兼容 Firefox */
-o-transition: all 1s linear 0s;/* 兼容Opera */
-webkit-transform: all 1s linear 0s;/* 兼容Safari and Chrome */;
}
/*transform(2D转换)
属性值有：translate(平移)、rotate(旋转)、scale(缩放)、skew(扭曲)*/
#box:hover{
width: 120%;
box-shadow: 0px 0px 5px orange;
/*3.鼠标滑过时实现平移、旋转、缩放、扭曲等效果*/
/*1.平移*/
transform: translate(50px,50px); /*translate() 如果一个值表示x轴需要平移的距离，两个值则表示x、y轴需要平移的距离*/
-webkit-transform: translate(50px,50px);/* 兼容Safari and Chrome */;
-ms-transform: translate(50px,50px);/*兼容IE10+*/
-moz-transform: translate(50px,50px);/*兼容 Firefox */
-o-transform: translate(50px,50px);/* 兼容Opera */
/*只让x轴平移*/
transform: translateX(50px);
-webkit-transform: translateX(50px);/* 兼容Safari and Chrome */;
-ms-transform: translateX(50px);/*兼容IE10+*/
-moz-transform: translateX(50px);/*兼容 Firefox */
-o-transform: translateX(50px);/* 兼容Opera */
/*只让y轴平移*/
transform: translateY(50px);
-webkit-transform: translateY(50px);/* 兼容Safari and Chrome */;
-ms-transform: translateY(50px);/*兼容IE10+*/
-moz-transform: translateY(50px);/*兼容 Firefox */
-o-transform: translateY(50px);/* 兼容Opera */
/*2.旋转*//*兼容性同 平移*/
transform:rotate(45deg); /*正值表示顺时针旋转，负值表示逆时针旋转*/
/*只让x轴旋转*/
transform:rotateX(45deg);
/*只让y轴旋转,相当一3D旋转*/
transform:rotateY(45deg);
/*3.缩放*//*兼容性同 平移*/
transform:scale(0,0.2); /*两个值，第一个表示水平缩放，第二个表示竖直缩放*/
/*4.扭曲*//*兼容性同 平移*/
transform:skew(30deg, 30deg); /*第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。*/
}
Related recommendations:
Detailed explanation of the animation attribute of css3 (with code)
How to make text display a flashing effect purely using css code? (Code example)
How to use CSS and D3 to achieve cycloid swing effect animation
The above is the detailed content of What is css transition? A brief introduction to transition elements in css. For more information, please follow other related articles on the PHP Chinese website!