CSS过渡与动画详解-优快云博客

接上一篇

过渡transition

transition-property:过渡属性

transition-duration:过渡持续时间

transition-delay:过渡延迟

transition-timing-function:过渡效果 ease | linear | ease-in | ease-out | ease-in-out

栗子:

  .container {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

.container:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

兼容性:IE10+

动画animation

前缀：-webkit-,-ms-,-moz-

@keyframes + 名称 {

form{}

to{}

}

百分比值:

@keyframes + 名称 {

0%{}

50%{}

100%{}

}

animation:@keyframes定义的名称

属性列表

栗子:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	  @keyframes myname{
	  	 10%{
	  	 	background-color:red;
	  	 	transition:all 0.3s;
	  	 }
	  	 50%{
	  	 	background-color:blue;
	  	 	transition:all 0.3s;
	  	 }
	  	 100%{
	  	 	background-color:yellow;
	  	 	transition:all 0.3s;
	  	 }
	  }
	  .container{
	  	 width:200px;
	  	 height:200px;
	  	 background:pink;
	  	 animation:myname 5s;
	  }
	</style>
</head>
<body>
	<div class="container">
	
	</div>

</body>
</html>

兼容性：IE10+

多列column

栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>column</title> 
<style> 
.newspaper {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 40px;
    -webkit-column-rule-style: outset;
    -webkit-column-rule-width: 1px;

    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -moz-column-rule-style: outset;
    -moz-column-rule-width: 1px;

    column-count: 3;
    column-gap: 40px;
    column-rule-style: outset;
    column-rule-width: 1px;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

</body>
</html>

效果图:

用户界面

1、resize

2、box-sizing

3、outline-offset

resize:

{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	resize:both;
	overflow:auto;
}

box-sizing:border-box | content-box | padding-box

此处略

兼容性

后记：从哪跌倒就从哪爬起，没什么大不了的事。逐梦，无惧！！！

css3学习笔记（二）

过渡transition

动画animation

多列column

用户界面