过渡的css样式,css过渡属性包括哪些

css 过渡/动画 属性

transition-property            过渡效果的CSS属性名称

transition-delay                设置过渡延迟时间

transition-duration            设置完成过渡效果需要花费的时间

transition-timing-function    设置过渡效果的速度曲线

transition                            设置过渡属性的复合写法

transform-origin                设置旋转元素的基点位置（不常用，了解即可）

transform-style                  让转换的子元素保留3D转换（不常用，了解即可）

opacity                                设置元素的透明度

@keyframes                        设置关键帧动画

animation                            设置动画属性

相关问答

Q1: 方框用过渡走一圈变色用css怎么实现

方框用过渡走一圈变色用css实现方法

CSS3样式，ClassName = animate

style

.animate{

width:65px;

height:40px;

background:#92B901;

color:#ffffff;

position:absolute;

font-weight:bold;

font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;

padding:20px 10px 0px 10px;

display:blcok;

margin:5px;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-webkit-border-radius:5px;

-o-transition-property:width,height,-o-transform,background,font-size,opacity;

-o-transition-duration:1s,1s,1s,1s,1s,1s;

-moz-transition-property:width,height,-o-transform,background,font-size,opacity;

-moz-transition-duration:1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;

transition-duration:1s,1s,1s,1s,1s,1s;

border-radius:5px;

opacity:0.4;

}

.animate:hover{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

opacity:1;

background:#1ec7e6;

width:90px;

height:60px;

font-size:16px;

}

/style

Q2: CSS过渡与动画

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果，比如 :hover 、 :active 或者通过js改变状态。

动画包含两部分，描述动画的样式规则和指定动画开始、结束和中间过程样式的关键帧。

关于动画事件，点击 此处 了解更多。

Q3: 如何用纯 CSS 实现页面之间的平滑过渡

使用过渡属性 transition可以让页面的模块进行平滑过渡

例子：

html

head

style

div {

width: 100px;

height: 100px;

background: red;

transition: width 2s;

}

div:hover {

width: 300px;

}

/style

/head

body

div/div

/body

/html

上面这个例子可以看到长宽100的正方形平滑过渡2s

transition的具体属性值

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

参考

Q4: css如何实现颜色的过渡效果

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的style标签中，输入css代码：

button {width: 100px; height: 50px;border: 0;color: white;background: -webkit-radial-gradient(#72787f, #545c64);}

3、浏览器运行index.html页面，此时用CSS实现了按钮中间白、四周黑，上方白、下方灰的效果。