动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称动画时间运动曲线何时开始播放次数(无线播放infinite) 是否反方向;
*保持播放完后的位置：forwards
案例1
踢足球（近大远小）


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}img{width: 100px;transform: translate(-30px, 100px)  rotate(-180deg) scale(1);animation: ball 5s ease-in infinite;}@keyframes ball {0%{transform: translate(-30px, 100px) rotate(-180deg) scale(1);}25%{transform: translate(400px, 500px) rotate(360deg) scale(2);}50%{transform: translate(1000px,300px) rotate(-180deg) scale(1);}75%{transform: translate(400px, -30px) rotate(360deg) scale(0.5);}100%{transform: translate(-30px, 100px) rotate(-180deg) scale(1);}}</style>
</head>
<body>
<img src="data:images/ball.jpg" alt="">
</body>
</html>

案例2
加载动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.public{width: 40px;height: 40px;margin: 50px 100px;position: absolute;/*border: 1px solid;*/}.public span{width: 10px;height: 10px;background-color: #999;border-radius: 50%;position: absolute;animation: move 1.5s linear infinite;}.public span:nth-child(1){ left: 0; top: 0px;}.public span:nth-child(2){ right: 0; top: 0px;}.public span:nth-child(3){ right: 0; bottom: 0px;}.public span:nth-child(4){ left: 0; bottom: 0px;}.box2{transform: rotate(45deg);}@keyframes move {0% { transform: scale(0.1)}50% { transform: scale(1)}100% { transform: scale(0.1)}}/*设置等待时间*/.box1 span:nth-child(1){ animation-delay: -0.1s;}.box2 span:nth-child(1){ animation-delay: -0.3s;}.box1 span:nth-child(2){ animation-delay: -0.5s;}.box2 span:nth-child(2){ animation-delay: -0.7s;}.box1 span:nth-child(3){ animation-delay: -0.9s;}.box2 span:nth-child(3){ animation-delay: -1.1s;}.box1 span:nth-child(4){ animation-delay: -1.3s;}.box2 span:nth-child(4){ animation-delay: -1.5s;}</style>
</head>
<body>
<div class="public box1"><span></span><span></span><span></span><span></span>
</div>
<div class="public box2"><span></span><span></span><span></span><span></span>
</div>
</body>
</html>

动画(CSS3) animation相关推荐

1分钟深入了解CSS3的动画属性animation
拖好久的animation-温馨提示,先看效果,代码附在讲解后上篇说到@keyframe可以定义动画,animation就是将@keyframe所定义好的动画添加在元素身上. animation可以 ...
html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
CSS3 animation动画，风车旋转、loading、人物走路动画案例
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)
css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work) 飞机动画块(他从一边到另一边飞行 - 永远). 可以使用jquery折 ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
ae制h5文字动画_H5案例分享：CSS3 Animation动画
CSS3 Animation动画一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
html动画效果停顿几秒,css3 animation动画执行结束，停顿几秒后重新开始执行
要实现css3 animation动画执行结束,停顿几秒后重新开始执行的效果,首先想到的是延时执行:animation-delay,然后设置animation-iteration-count为infi ...

动画(CSS3) animation

动画(CSS3) animation相关推荐

最新文章

热门文章