transform动画有两点：
- 动画效果：transform（设置动画表现形式）
translate(x,y)：x/y轴移动
scale(x,y)：缩放
rotate(angle)：旋转
- 动画效果控制：transition （设置动画过程，属性名称transition-property、动画时长transition-duration延迟时长transition-delay等）
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition: transform; /*控制上面的transform属性*/
transition-duration: 1s; /*1秒的动画时长*/
transition-delay: 0.5s; /*延迟0.5秒后移动*/
}
div:hover
{
transform: translateX(200px);
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
animation 动画
div
{
animation:mymove 5s infinite;
}| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 说明 |
|---|---|
| animationname | 必需的。定义animation的名称。 |
| keyframes-selector | 必需的。动画持续时间的百分比。 合法值： 0-100% 注意： 您可以用一个动画keyframes-selectors。 |
| css-styles | 必需的。一个或多个合法的CSS样式属性 |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
/*5秒内从左到右移动*/
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
/*从上到下*/
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:300px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>
text-transform：控制文本的大小写。
<html>
<head>
<style type="text/css">
h1 {text-transform: uppercase}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
