您的位置：首页 > Web前端 > CSS

CSS自定义动画@keyframes的使用

2020-02-07 19:34 1006 查看

CSS中有一种自定义动画样式：@keyframes，这可以在元素的animation中被引用，从而产生两种样式的过渡
@keyframes格式：

@keyframes ***{
from{}
to{}
}

***为用户自定义动画引用名
eg:
html:

<head>
<meta charset="utf-8">
<link href="css/index.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div id="target"></div>
<button onclick="enlarge()">enlarge</button>
<button onclick="lessen()">lessen</button>
<button onclick="play()">play</button>
<button onclick="stop()">stop</button>
<script>
function enlarge(){
document.getElementById("target").style="animation: myFrame 3s forwards;"
}
function lessen(){
document.getElementById("target").style="animation: myFrame2 3s forwards;"
}
function play(){
document.getElementById("target").style.webkitAnimationPlayState="running";
}
function stop(){
document.getElementById("target").style.webkitAnimationPlayState="paused";
}
</script>
</body>

css:

@keyframes myFrame{
from{
transform: scale(1,1);
}
to{
transform: scale(5,5);
}
}
@keyframes myFrame2{
from{
transform: scale(5,5);
}
to{
transform: scale(1,1);
}
}
div{
margin: 100px;
width: 50px;
height: 50px;
background-color: orange;
-webkit-user-select: none;
}

运行结果：

  • 点赞
  • 收藏
  • 分享
  • 文章举报
Bitter_elf 发布了31 篇原创文章 · 获赞 1 · 访问量 1379 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航