<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.boss {
width: 200px;
height: 200px;
border: 5px solid #000;
/* margin: 200px auto 0 auto; */
/* 透视 */
/* perspective: 100px; */
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
font-size: 30px;
/* 过渡 */
transition: all 5s linear 2s;
/* transition: css过渡样式 过渡时间 运动曲线 开始时间;
all s|ms ease s|ms */
/* transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
linear 匀速。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
transition-delay 定义transition效果开始的时候 */
/* transform-style: preserve-3d; */
}
/* 要创建 CSS3 动画,你需要了解 @keyframes 规则。 */
/* animation: 选择器的关键名称 动画时间 运动曲线 开始的时间 播放次数
是否反复播放 是否运用最后一帧动画的样式 是否暂停或播放;
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
infinite 无限播放
normal 默认值。动画按正常播放。 测试 »
reverse 动画反向播放。 测试 »
alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 测试 »
alternate-reverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 "normal" 或 "alternate" 时)或 to 关键帧中的值(当 animation-direction 为 "reverse" 或 "alternate-reverse" 时)。
both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
paused 指定暂停动画 测试 »
running 指定正在运行的动画*/
.box2 {
width: 200px;
height: 200px;
background-color: red;
animation: move 3s linear 0s 1 normal forwards;
}
@keyframes move{
from{
width: 200px;
background-color: red;
}
to{
width: 500px;
height: 500px;
background-color: orange;
}
}
</style>
</head>
<body>
<button type="button" οnclick="func1()">按钮1</button>
<button type="button" οnclick="func2()">按钮2</button>
<!-- <div class="boss">
<div class="box1">123123123</div>
</div> -->
<div class="box2">11111111</div>
</body>
<script type="text/javascript">
// var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
function func1(){
// box1.style.transform = "translate3d(0px,0px,200px)";
// box1.style.transform = "rotate3d(0,0,100,30deg)";
// box1.style.transform = "rotateX(30deg)";
// rotate3d(x,y,z,angle)
// box1.style.width = "500px";
// box1.style.height = "500px";
box2.style.animationPlayState ="paused";
}
function func2(){
// box1.style.transform = "translate(0px,0px)";
// box1.style.transform = "rotateY(30deg)";
box2.style.animationPlayState ="running";
}
</script>
</html>
HTML的动画
最新推荐文章于 2024-08-25 16:29:14 发布
本文介绍了如何使用CSS3实现动画效果,包括transition的使用、关键帧定义(@keyframes)以及控制动画播放状态(animation-play-state)。展示了如何通过JavaScript控制元素的动画暂停和播放。
摘要由CSDN通过智能技术生成