一、css动画属性
animation是css3的动画属性,也是简写,其中包含以下几种值可配置
默认值:none 0 ease 0 1 normal
值 | 描述 |
---|---|
animation-name | 需要绑定到选择器的 keyframe 名称 |
animation-duration | 完成动画所花费的时间,以秒或毫秒计(数字加单位,例:1s) |
animation-timing-function | 动画的速度曲线(动画将如何完成一个周期) |
animation-delay | 动画在启动前的延迟间隔 |
animation-iteration-count | 动画应该播放的次数(无限:infinite;或者使用数字表示次数) |
animation-direction | 是否应该轮流反向播放动画 |
备注:
速度曲线
值 | 描述 |
---|---|
linear | 匀速 |
ease | 慢-快-慢(加速快) |
ease-in | 慢-快 |
ease-out | 快-慢 |
ease-in-out | 慢-快-慢(加速慢) |
cubic-bezier(n,n,n,n) | 自定义(n取值为0~1) |
二、实例
1、普通动画(以旋转效果举例)
普通动画较为简单,不做详细介绍了,直接上代码
<template>
<div class="main">
<div class="animation"></div>
</div>
</template>
<style lang="scss" scoped>
.main {
display: flex;
align-items: center;
justify-content: center;
.animation {
margin-left: 50px;
width: 100px;
height: 100px;
border: 1px solid #999;
border-radius: 5px;
animation: rotate 6s linear infinite;
-webkit-animation:rotate 6s linear infinite; /* Safari 和 Chrome */
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
}
</style>
2、帧动画
帧动画和普通动画略有区别,需要使用steps函数,steps函数接收一个数字参数 n,这个数字表示把动画分成 n 帧。
下面的示例,因为图片有30个片段,所以我分成了30帧去完成。
<template>
<div class="main">
<div class="animation"></div>
</div>
</template>
<style lang="scss" scoped>
.main {
display: flex;
align-items: center;
justify-content: center;
.animation {
width: 96px;
height: 100px;
border: 1px solid #999;
border-radius: 5px;
cursor: pointer;
background: url(~@/assets/img/frame.png);
background-position: 0 4px;
}
.animation:hover {
animation: run 1s steps(30) 0s 1 both;
-webkit-animation: run 1s steps(1) 0s 1 both; /* Safari 和 Chrome */
}
@-webkit-keyframes run {
to {
background-position: 0 3000%;
}
}
}
</style>
注意:
background-position参数的值要与div(dom)的宽度或者高度成整数倍关系,否则动画会出现移动现象。
效果图如下(只是截图,无法呈现动画效果):鼠标移上去会执行一次动画,移开后复原