css中的动画效果
在前端中，随着语言的发展，css变得越来越强大，可以实现许多动态动画效果！ 下面是动画效果的基本格式
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div{
animation-name: move;
animation-duration: 2s;
}
</style>或者
<style>
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
}
div{
animation-name: move;
animation-duration: 2s;
}
</style><body>
<div>
</div>
</body>本人比较推荐的是用百分比来表示，好处大大的，我们往后看就能知道。
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(500px, 0);
}
50% {
transform: translate(500px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div{
animation-name: move;
animation-duration: 2s;
}
</style>这是一种正方形动画，如果是from,to则不可以。
动画属性非常多，是好事，说明它的功能很大，对于我们写网站方便实现更多的效果。
在这里插入图片描述
我们现在将这些属性用在程序中 来看一串代码，读者们可以将这些程序复制，进行实验，本人使用软件为vscode.
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(500px, 0);
}
50% {
transform: translate(500px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0;
animation-timing-function: linear;
animation-direction: alternate;
animation-fill-mode: forwards;
}
div:hover {
animation-play-state: paused;
}
</style>第一种是分开写
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(500px, 0);
}
50% {
transform: translate(500px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 2s ease infinite alternate forwards;
</style>第二种是连写，熟练了会比较方便
<body>
<div>
</div>
</body>程序多谢了就会熟悉，vscode有代码提示，大家不必死记硬背，希望和大家共同进步。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-04-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读