webcss动画：第13天16天搞定前端
webcss动画：第13天16天搞定前端一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。好了，有关CSS动画效果的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动起来</title> <style> div { width: 100px; height: 100px; background:
在以往，想在html上实现动画效果，要不就用被乔布斯恨死的了Flash 动画，要不就用网页动画图像或者JavaScript 实现效果。在CSS3之后，就可以用css在HTML上实现动画了。
要创建 CSS3 动画，你需要了解 @keyframes 规则。现在 @keyframes 创建动画时，需将其绑定到一个选择器，否则动画不会有任何效果。
13.1 原生创建动画用CSS3原生代码创建动画，语法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，动画的名称；
keyframes-selector：必需，动画时长的百分比合法的值：0-100%， from（与 0% 相同），to（与 100% 相同）
css-styles：必需，一个或多个合法的 CSS 样式属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动起来</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s;
-webkit-animation: firstan 5s; /* Safari and Chrome */
}
@keyframes firstan {
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div/>
</body>
</html>
输出结果
如果每次都要自己手动用CSS去创建动画，那效果太低了。为此，有人专门专门开发了CSS动画库animation.css。可以在线https://animate.stylek看效果，它里面的动画效果，可以满足大多数需求了。下载https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目录下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用动画库实现动画</title>
<link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
老陈说编程，动画效果行
</main>
</body>
</html>
输出结果
好了，有关CSS动画效果的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##CSS##程序员##Web#
