>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 16192 个阅读者 刷新本主题
 * 贴子主题:  CSS3的@keyframes用法详解 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2024-04-26 06:06:38     消息  查看  搜索  好友  邮件  复制  引用

CSS3的@keyframes用法详解:
此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节。

一.基本知识:
keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题。
使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。

语法结构:

@keyframes animationname {keyframes-selector {css-styles;}}
参数解析:
1.animationname:声明动画的名称。
2.keyframes-selector:用来划分动画的时长,可以使用百分比形式,也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等价于 0% 和 100%。
建议始终使用百分比形式。

二.代码实例:

实例一:
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style type="text/css">  
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
    
  animation:theanimation 5s infinite alternate;
  -webkit-animation:theanimation 5s infinite alternate ;
  -moz-animation:theanimation 5s infinite alternate ;
  -o-animation:theanimation 5s infinite alternate ;
  -ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
  from {left:0px;}
  to {left:200px;}
}
@-webkit-keyframes theanimation{
  from {left:0px;}
  to {left:200px;}
}
@-moz-keyframes theanimation{
  from {left:0px;}
  to {left:200px;}  
}
@-o-keyframes theanimation{
  from {left:0px;}
  to {left:200px;}  
}
@-ms-keyframes theanimation{
  from {left:0px;}
  to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面代码实现了简单的动画,下面简单做一下分析:
1.使用@keyframes定义了一个名为theanimation的动画。
2.@keyframes声明的动画名称要和animation配合使用。
3.from to等价于0%-100%,所以就是规定5s内做了一件事情。

实例二:


<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
<style type="text/css">  
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
    
  animation:theanimation 4s infinite alternate;
  -webkit-animation:theanimation 4s infinite alternate ;
  -moz-animation:theanimation 4s infinite alternate ;
  -o-animation:theanimation 4s infinite alternate ;
  -ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
  0% {top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

程序猿的技术大观园:www.javathinker.net


程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->面向对象开发方法概述之UML语言(下)
  JavaWeb开发-->使用过滤器
  JSP与Hibernate开发-->Spring、JPA与Hibernate的整合
  Java网络编程-->创建非阻塞的HTTP服务器
  精通Spring-->Vue CLI脚手架工具
  Vue3开发-->通过Vuex进行状态管理
  webpack常用插件
  vue3.0-基本特性和用法
  常用CSS样式属性大全
  vue3.0 代理Proxy API
  vue-min-picker普通选择器,日期选择器,省市区选择器,适用...
  Vue.js学习笔记-基础部分+完整实现代码
  史上最全的web前端面试题汇总及答案
  SQL NULL 值
  HTML DOM Image图片对象
  HTML 头部的元素的用法
  JavaScript 库
  JavaScript 闭包
  JavaScript编程规范
  JavaScript 的字符串以及处理方法
  JavaScript 语法大全
  更多...
 IPIP: 已设置保密
树形列表:   
很多事确实不是所有年轻姑娘都承受得了的。逼着你往前走... mikhop 2024-04-26 06:06:38
1页 1条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。