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');

})

css transition ease,css3 transition属性相关推荐

css中translation,css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
css transition兼容性,CSS3 Transition详解和使用
Transition 简介 Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性. transition-property 用于指定应用过渡属性的名称 transition-dur ...
css通知页面,CSS3 transition 实现通知消息轮播条
Vue 版本,拷贝到文件即可使用 {{ item }} export default { data () { return { // 开启动画 isAnimated: false, // 轮播数据 d ...
Transition of CSS3
文章目录 Transition of CSS3 transition-property transition-duration transition-timing-function linear ea ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
CSS系列之过渡 transition（CSS3）
文章の目录 1.transition 1.1.概述 1.2.值的组成 2.transition-property 2.1.属性值 3.transition-duration 3.1.属性值 4.tra ...
css动画走马灯5秒,css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...

css transition ease,css3 transition属性

css transition ease,css3 transition属性相关推荐

最新文章

热门文章