定义动画：
1.通过@keyframas+自定义动画名称{}
2.在动画集中通过from和to设置动画的开始和结束状态
@keyframes move{from{opacity:0;}
to{opacity:1;}
}
也可以用0%代替from，100%代替to
注意：
◆动画集要单独定义，不能放到类样式中

animation-name属性：
用于定义@keyframes动画规定的名称
animation-name:keyframename;

animation-duration属性：
用于定义动画效果完成所需的时间（秒|毫秒）
animation-duration:time;

animation-timing-function属性：
用于定义动画效果完成的速度变化
一般取linear(匀速)，与过渡效果(transition-timing-function)的速度取值一样

animation-delay属性：
定义动画效果执行的延迟时间
animation-delay:time;

animation-iteration-count属性：
定义动画的播放次数
可以取number或者infinite(无限次)

animation-direction属性：
用于定义动画播放的方向,即动画播放完成后是否逆向交替循环
animation-direction:nomal|alternate(逆向交替循环播放);

animation-fill-mode属性：
用于定义动画之外的状态，保持变化之后的状态
animation-fill-mode:forwards;

animation-play-state属性：
用于设置动画暂停
animation-play-state:paused;
.box:hover {/* 动画暂停 */animation-play-state: paused;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box{width: 300px;height: 300px;background-color: #000000;animation-name: move;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: linear;animation-direction: alternate;}.box:hover{animation-play-state: paused;}@keyframes move {from{transform: translateX(0px);}to{transform: translateX(400px);}}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

动画属性联写

或者可以调用多个动画集

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box{width: 300px;height: 300px;background-color: #000000;animation: move 1s linear infinite alternate,change 1s linear infinite alternate;}.box:hover{animation-play-state: paused;}@keyframes move {from{transform: translateX(0px);}to{transform: translateX(400px);}}@keyframes change {from{background-color: #000000;}to{background-color: red;}}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

可以设置百分比的形式设置动画集中的不同状态

百分比是相对动画执行时间而来的。

动画(animation)属性详解相关推荐

css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
CSS3 animation（动画）属性详解
CSS3animation(动画)属性 animation-none :指定有没有动画(可用于覆盖从从级联的动画) animation-duration属性定义动画完成一个周期需要多少秒或毫秒 tim ...
css鼠标划出动画(transition属性详解)
动画描述:鼠标滑入0.2s添加背景颜色,鼠标滑出0.2s变成之前背景颜色 .navigation{transition: all 0.2s ease-in 0s; } .navigation:hove ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
css动画定义,css3的动画(animation)属性的详解（附代码）
本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. css3动画(animation)具有以下属性: ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
CSS动画（animation）详解
CSS动画(animation)详解通过<CSS过渡>一节的学习我们知道,利用 transition 属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定 ...
安卓动画全解：补间动画（视图动画）、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性，动画集AnimationSet
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓动画全解:补间动画(视图动画).布局动画.属性动画.逐帧动画. 主要内容包含:动画Animation属性.Alpha属性.Scale属性.Tran ...
iOS动画-CAAnimation使用详解
理解了隐式动画后,显式动画就更加通俗易懂了.区别于隐式动画的特点,显式动画就是需要我们明确指定类型.时间等参数来实现效果的动画.除此之外,我们也可以创建非线性动画,比如沿着任意一条曲线运动等: 我们平 ...
CSS3animation属性详解（三）
CSS3animation属性详解(三) animation-direction animation-direction属性检索或设置对象动画在循环中是否反向运动语法 animation-dire ...

动画(animation)属性详解

动画属性联写

或者可以调用多个动画集

可以设置百分比的形式设置动画集中的不同状态

百分比是相对动画执行时间而来的。

动画(animation)属性详解相关推荐

最新文章

热门文章