简单的CSS3动画
先来看效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style type="text/css">
p{
padding: 5px;
border: medium double #508AD2;
background-color: lightgray;
font-family: sans-serif;
}
#kk{
line-height: 10px;
font-size: large;
border: medium solid #E97373;
animation: myoo 2s linear 300ms infinite;/*页面一加载就会显示这些效果*/
animation-direction: alternate;
}
/*#kk:hover{
animation: myoo 2s linear 300ms infinite;/*鼠标经过的时候会出现效果*/
animation-direction: alternate;
}*/
@keyframes myoo{
from{
font-size: small;
background-color: red;
}
/*中间几个帧的效果*/
50%{
background-color: yellow;
padding:1px;
}
75%{
background-color: white;
}
/*最终效果*/
to{
font-size: x-large;
border:medium double white;
background-color: green;
padding:4px;
}
}
</style>
</head>
<body>
<P>
As the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an<span id="kk"> women</span>, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is so
</P>
</body>
</html>animaion属性图：
动画在播放完之后，都会回到最初的状态，所以想一直保持一个状态得用过渡（transition）,
1、animation 出现在哪里，哪里就会有应用这个特性，不管是在初始布局（如效果图）还是在要在什么触发下；
2、一个animation 可以为多个选择器使用，只要选择器写在一起，并用空格隔开。#kk #hh { animation:name duration function delay count };
3、可以为一个元素用过个animation,可以给命名多个name，并用逗号隔开；
5193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
