您的位置：首页 > Web前端 > JavaScript

HTML5+CSS3+JS学习笔记-13-CSS3过渡和CSS3动画

2017-01-06 21:52 856 查看

学习了CSS3过渡和CSS3动画2个类似的功能

截图：

CSS3过渡，旋转45度同时缩小3/4长宽

代码：

<!DOCTYPE HTML>

<html>

<head>
<meta charset="utf-8">
<title>CSS3过渡</title>

<style type="text/css">
/*

为了添加某种效果可以从一种样式转变到另一个的时候，

无需使用Flash动画或JavaScript。用鼠标移过下面的元素：

要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。

*/

div {
width: 400px;
height: 400px;
margin: 100px auto;
background-color: green;
transition: width 2s linear 2S, height 2s ease-out 2S, transform 2s;
-webkit-transition: width 2s linear 2S, height 2s ease-out 2S, -webkit-transform 2s;
}
/* transition:简写属性，用于在一个属性中设置四个过渡属性
* 1.规定应用过渡的 CSS 属性的名称;
* 2.定义过渡效果花费的时间。默认是 0;
* 3.规定过渡效果的时间曲线。默认是 "ease",linear,ease-out;
* 4.规定过渡效果何时开始。默认是 0。*/

div:hover {
width: 300px;
height: 300px;
transform: rotateZ(45deg);
}
</style>
</head>

<body>
<div></div>
</body>

</html>

CSS3动画，自动变换背景颜色

代码：

<!DOCTYPE HTML>

<html>

<head>
<meta charset="utf-8">
<title>CSS3动画练习</title>
<style type="text/css">
/*@keyframes规则是创建动画。

* @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。*/
/*当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变*/

@keyframes myfirst {
from {
/*background: red;*/
/*0% {
background: red;
}
25% {
background: yellow;
}
50% {
background: blue;
}
100% {
background: green;
}*/
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
to {
/*background: yellow;*/
/*0% {
background: red;
}
25% {
background: yellow;
}
50% {
background: blue;
}
100% {
background: green;
}*/
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
}

@-webkit-keyframes myfirst
/* Safari 与 Chrome */

{
from {
background: red;
}
to {
background: yellow;
}
}
/*

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称

规定动画的时长

* */

div {
width: 400px;
height: 400px;
margin: 100px auto;
background-color: green;
animation: myfirst 4s ease ;
/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：*/
-webkit-animation: myfirst 4s ease;
/* Safari 与 Chrome */
animation-iteration-count:4;/*规定动画被播放的次数。默认是 1*/
}
</style>
</head>

<body>
<div></div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航