animation综合性的动画设置属性
语法:
animation:name duration timing-function delay iteration-count direction;
用法:
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线,，默认ease，linear,ease- in,ease-out,亦可是设置贝塞尔曲线, 这里在做帧动画的时候可以设置steps(23)步进器的形式,进行帧动画播放
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数,infinite无限循环
animation-direction 规定是否应该轮流反向播放动画,normal默认值，alternate奇数次正常运动，偶数次反方向运动，reverse,反方向运动，alternate-reverse奇数次反方向偶数次正方向运动
animation-fill-mode: forwards;使得动画保留最后一帧的效果
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1 {
width: 600px;
height: 200px;
margin: 0 auto;
font-size: 50px;
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑";
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal;
/* 字体颜色 */
color: aqua;
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center;
/* 文字的行高 */
line-height: 200px;
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 10px 5px 5px black;
}
.d2 {
width: 600px;
height: 200px;
margin: 0 auto;
font-size: 50px;
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑";
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal;
/* 字体颜色 */
color: #fff;
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center;
/* 文字的行高 */
line-height: 200px;
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 0px 0px 5px black;
}
.d3 {
width: 600px;
height: 200px;
margin: 0 auto;
font-size: 50px;
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑";
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal;
/* 字体颜色 */
color: #fff;
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center;
/* 文字的行高 */
line-height: 200px;
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, 0px 0px 10px orangered, 0px 0px 5px red;
/* 动画 */
animation: donghua 3s infinite alternate;
}
@keyframes donghua {
from {
text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, 0px 0px 10px orangered, 0px 0px 5px red;
}
to {
text-shadow: 0px 0px 10px yellow, 0px 0px 5px orange, 0px 0px 5px orangered, 0px 0px 2px red;
}
}
.d4 {
width: 600px;
height: 200px;
margin: 0 auto;
font-size: 100px;
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑";
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal;
/* 字体颜色 */
color: #fff;
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center;
/* 文字的行高 */
line-height: 200px;
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 1px 1px 0px yellow, 2px 2px 0px yellow, 3px 3px 0px orange, 4px 4px 0px orange, 5px 5px 0px orange, 6px 6px 0px orangered, 7px 7px 0px red, 8px 8px 0px red;
}
</style>
</head>
<body>
<div class="d1">
helloworld
</div>
<div class="d2">
helloworld
</div>
<div class="d3">
helloworld
</div>
<div class="d4">
helloworld
</div>
</body>
</html>
注意:animation-name设置的@keyframes时候, 可以是一个过渡的百分比不一定是from,和to,例如:
@keyframes donghua1{
/* from{} 等同于0%{}*/
0%{ transform: translate(0,0); }
33.3%{ transform: translate(500px,0); }
/* to{}等同于100%{} */
100%{ transform: translate(500px,400px); }
}
过渡效果transition
语法 transition:property duration timing-function delay;
transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#d1 {
width: 100px;
height: 100px;
background: skyblue;
/* 过渡效果,综合性过渡效果设置 */
/* transition: width 2s; */
/* 设置具有过渡效果的属性
可以设置多个值：width,background
也可以一次性设置所有都需要过渡 all
*/
ç-property: all;
/* 过渡的时间长度 */
transition-duration: 2s;
/* 整个过渡动画变化的速度
ease:（默认值），从慢到快在慢下来
linear:设置线性速度
ease-in:从慢到快的变化过程
ease-out:从快到慢的过程
可以通过浏览器进行调节获取贝塞尔曲线
cubic-bezier(0, 0.95, 1, 0.07)
*/
transition-timing-function: ease;
/* 设置延迟时间 */
/* transition-delay: 3s; */
}
#d1:hover {
width: 800px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
例子2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1 {
width: 300px;
height: 400px;
margin: 20px auto;
background: skyblue;
box-shadow: 0 0 0px #ccc;
transition: all 0.5s ease;
}
.d1:hover {
box-shadow: 0px 5px 10px #999;
}
</style>
</head>
<body>
<div class="d1">
</div>
</body>
</html>
网友评论