css transition ease,css3 transition属性

最近打算学习css3知识，觉得css3写出来的效果好炫好酷，之前一直想要学习来着。可能之前的决心，毅力，耐心不够，所以想要重整起来，放下浮躁的心态，一步一个脚印，踏踏实实的来学习。

首先学习的是css3 transition属性，该属性的定义为从一个属性值平滑过渡到另一个属性值。

格式为：transition: ，或

transition-property:

transition-duration:

transition-timing-function:

注意，由于各浏览器之间的兼容性差异，针对各浏览器写的css3样式都要加上前缀，如：

-webkit-: /*chrome,safari*/

-moz-: /*firebox*/

-ms: /*IE*/

-o-: /*opera*/

如下，举个例子，代码示例：

个人网站首页

.block{

width:400px;

height:400px;

background-color:blue;

-webkit-transition: background-color 3s;

}

.block:hover{

background-color:red;

}

.progress-bar{

width: 40px;

height: 40px;

background-color: blue;

}

.progress-bar:hover{

width: 960px;

}

#bar1{

-webkit-transition: width 3s ease;

}

#bar2{

-webkit-transition: width 3s linear;

}

#bar3{

-webkit-transition: width 3s ease-in;

}

#bar4{

-webkit-transition: width 3s ease-out;

}

#bar5{

-webkit-transition: width 3s ease-in-out;

}

#expermient{

-webkit-perspective:800px;

-webkit-perspective-origin:50% 50%;

-webkit-transform-style:preserve-3d;

}

#blocks{

width: 500px;

height: 500px;

background-color: blue;

margin: 0 auto;

-webkit-transform:rotateX(45deg);

}

.hw-cbg.on p{

padding:0px 0 0 30px;

-webkit-transition:padding-left 2s ease;

}

.hw-cbg p{

padding: 30px 0 0 0;

}

.animation{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@-webkit-keyframes mymove{

0% {margin-left: 0px;background-color: blue;}

50% {margin-left: 30px;}

100% {margin-left: 60px;}

}

ease

linear

ease-in

ease-out

ease-in-out

在节奏紧张的都市生活中，高效便携会让您的生活化繁为简。HUAWEI MateBook配备12英寸屏幕的

金属机身，重量仅为640g，厚度低至6.9mm。内在强大，彰显锐意与品质的交融；

轻薄时尚，是您工作生活的称心伴侣。

$(document).ready(function(){

$('.hw-cbg').addClass('on');

})