css animation动画使用
2024-09-03 02:11:17
<!-- animation 属性是一个简写属性,用于设置六个动画属性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction 注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
默认值: none 0 ease 0 1 normal
继承性: no
版本: CSS3
JavaScript 语法: object.style.animation="mymove 5s infinite" animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。 通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。 --> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试动画animation</title>
<style>
.div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
-moz-animation:mymove 5s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
} @-moz-keyframes mymove /* Firefox */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
最新文章
- 【NOI2016】优秀的拆分 题解(95分)
- 得到APP【每天听本书】微信交流群(每天更新)
- No.016 3Sum Closest
- JS 之作用域链和闭包
- POJ 3233 Matrix Power Series (矩阵快速幂+二分求解)
- C#委托(Delegate)学习日记
- TCP总结
- js求指定时间的周一和周日
- MySql-5.7.17-20解压缩版安装配置
- 使用apt-get安装相关的软件时,不能Fetch,现在更新为国内的源!
- spring事务详解(二)简单样例
- TensorFlow中的变量和常量
- n阶方阵的最值问题和对角线的和问题
- Mvc校验用户没有登录就跳转的实现
- Vue的路由实现:hash模式 和 history模式
- 运用Zabbix实现内网服务器状态及局域网状况监控(4) —— Zabbix客户端安装
- spring aop通过注解实现日志记录
- 什么是websoket
- bzoj 3837 (随机过题法了解一下)
- JavaScript笔记——使用AJax
热门文章
- Pandas | 07 函数应用
- 【游记】CSP-S2019游记
- Unable to resolve service for type &#39;Microsoft.AspNetCore.ResponseCompression.IResponseCompressionProvider&#39; while attempting to activate &#39;Microsoft.AspNetCore.ResponseCompression.ResponseCompressionMid
- GitLab修改root用户密码
- Windows10 下 JAVA JDK版本设置修改操作
- 出现Strict Standards: Only variables should be passed by reference in的解决方法
- 谷歌浏览器扩展程序中安装vue-devtools插件
- 第十七节:.Net Core中新增HttpClientFactory的前世今生
- ElasticSearch中的JVM性能调优
- CSP2019退役记