css3动画属性
Posted 小白宝库
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3动画属性相关的知识，希望对你有一定的参考价值。
@keyframes 关键帧名{
from{
/* 动画的起始属性； */
}
to{
/* 动画结束属性 */
}
}
或者
@keyframes 关键帧名{
from{
/* 动画的起始属性； */
}
20%{
/* 动画进行到20%时的属性 */
}
50%{
/* 动画进行到50%时的属性 */
}
to{
/* 动画结束属性 */
}
}
使用方法:
.row{
animation: 关键帧名 持续时间 动画速度 延迟时间 播放次数 ;
}
@keyframes 关键帧名{
from{
/* 动画的起始属性； */
}
20%{
/* 动画进行到20%时的属性 */
}
50%{
/* 动画进行到50%时的属性 */
}
to{
/* 动画结束属性 */
}
}
或
ul li:hover{
animation-name: 关键帧名;
animation-duration: 持续时间;
animation-timing-function:动画速度;
animation-delay:延迟时间;
animation-direction:播放方式;
animation-iteration-count:播放次数;
}
animation-delay(延迟时间):指定动画开始前的延迟时间，可取 ms(毫秒)、s(秒)等。
animation-direction(动画播放方式):指定动画循环播放的方式：
normal:动画只向前播放。
alternate:动画向前播放然后反方向播放。
animation-duration(持续时间):动画播放的持续时间，可取ms(毫秒)、s(秒)等。
animation-iteration-count(播放次数):指定动画的播放次数，可以是 infinite(无限循环)或 数字(次数)。
animation-name(关键帧名):指定的动画名称。
animation-play-state:允许动画暂停播放和重新播放，可取running(允许暂停，默认)或paused(允许从新播放)。
animation-timing-function;指定动画播放速度的变化，linear(动画开始到结束速度相同)、ease(默认，动画从低速开始，然后加快)、ease-in(动画以低速开始)、ease-out(动画以低速结束)、ease-in-out(动画以低速开始和结束)、cubic-bezier(在cubic-bezier(x,x,x,x)中设置值，值为0到1的数值)。
实例为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul{
width: 400px;
list-style: none;
}
ul li{
width: 100px;
height: 50px;
line-height: 50px;/* 居中显示 */
text-align: center;/* 文字居中显示 */
background-color: aqua;/* 设置背景色 */
border-left: 1px solid black;/* 左边框 */
box-shadow: inset 0px 0px 15px black;/* 阴影 */
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
}
@keyframes muen{
to{
width: 300px;
background-color: cadetblue;
color: snow;
box-shadow: 5px 5px 15px black;
}
}
ul li:hover{
animation-name: muen;/* 关键帧名 */
animation-duration: 600ms;/* 持续时间 */
animation-timing-function: linear;/* 动画速度 */
animation-delay: 15ms;/* 延迟时间 */
animation-direction: alternate;/* 播放方式 */
animation-iteration-count: infinite;/* 播放次数 */
}
</style>
</head>
<body>
<div>
<ul>
<li>订单查询</li>
<li>商品管理</li>
<li>客户管理</li>
<li>类别管理</li>
<li>权限管理</li>
</ul>
</div>
</body>
</html>
大神勿喷！！！！！
以上是关于css3动画属性的主要内容，如果未能解决你的问题，请参考以下文章