CSS3动画-transition、animation、transform(translate/scale/rotate)
目录一、transition(过渡)1、transition-duration2、transition-property3、transition-timing-function4、transition-delay二、animation1、@keyframes2、animation-timing-function3、animation-delay4、animation-iteration-count
·
目录
4、animation-iteration-count:检索或设置对象动画的循环次数
5、animation-play-state:检索或设置对象动画的状态(running\paused)
一、transition(过渡)
- transition-duration transition效果需要指定多少秒或毫秒才能完成
- transition-property 指定CSS属性的name,transition效果
- transition-timing-function 指定transition效果的转速曲线
- transition-delay 定义transition效果开始的时候
1、transition-duration
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
transition-duration: 1s;
&:hover {
width: 4rem;
height: 4rem;
}
}
</style>
2、transition-property
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
transition-duration: 1s;
transition-property: height;
&:hover {
width: 4rem;
height: 4rem;
}
}
</style>
3、transition-timing-function
- linear(默认属性) 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 匀速
- ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 快-慢-慢
- ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 快-快
- ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 慢-慢
- ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 慢-快-慢
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 自定义
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
transition-duration: 1s;
transition-timing-function: ease-in-out;
&:hover {
width: 4rem;
height: 4rem;
}
}
</style>
4、transition-delay
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
transition-delay: 1s;
&:hover {
width: 4rem;
height: 4rem;
}
}
</style>
几个属性的简写,如下:
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
transition: all 1s ease-in-out 2s;//动画持续一秒,缓进缓出,并在两秒钟后开始执行
&:hover {
width: 4rem;
height: 4rem;
}
}
</style>
二、animation
- @keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
- animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义
- animation-duration 检索或设置对象动画的持续时间
- animation-timing-function 检索或设置对象动画的过渡类型
- animation-delay 检索或设置对象动画的延迟时间
- animation-iteration-count 检索或设置对象动画的循环次数
- animation-direction 检索或设置对象动画在循环中是否反向运动
- animation-play-state 检索或设置对象动画的状态
1、@keyframes
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
&:hover {
animation: mymove 2s;
}
}
@keyframes mymove {
0% {
width: 2rem;
height: 2rem;
}
50% {
width: 4rem;
height: 4rem;
}
100% {
width: 2rem;
height: 2rem;
margin-left: 5rem;
}
}
</style>
其实上面的animation: mymove 2s;就是animation-name:mymove 和 animation-duration:2s; 的简写形式
2、animation-timing-function
- linear 动画从头到尾的速度是相同的。
- ease 默认。动画以低速开始,然后加快,在结束前变慢。
- ease-in 动画以低速开始。
- ease-out 动画以低速结束。
- ease-in-out 动画以低速开始和结束。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
&:hover {
animation: mymove 2s;
animation-timing-function: ease-in-out;
}
}
@keyframes mymove {
0% {
width: 2rem;
height: 2rem;
}
50% {
width: 4rem;
height: 4rem;
}
100% {
width: 2rem;
height: 2rem;
margin-left: 5rem;
}
}
</style>
3、animation-delay
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
&:hover {
animation: mymove 2s;
animation-delay: 1s;
}
}
@keyframes mymove {
0% {
width: 2rem;
height: 2rem;
}
50% {
width: 4rem;
height: 4rem;
}
100% {
width: 2rem;
height: 2rem;
margin-left: 5rem;
}
}
</style>
4、animation-iteration-count:检索或设置对象动画的循环次数
animation-iteration-count: infinite;表示无限循环
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
animation: mymove 2s;
animation-iteration-count: infinite;
}
@keyframes mymove {
0% {
width: 2rem;
height: 2rem;
}
50% {
width: 4rem;
height: 4rem;
}
100% {
width: 2rem;
height: 2rem;
margin-left: 5rem;
}
}
</style>
当然,还可以指定具体的循环次数,如下:
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
animation: mymove 2s;
animation-iteration-count: 3;//只循环三次
}
@keyframes mymove {
0% {
width: 2rem;
height: 2rem;
}
50% {
width: 4rem;
height: 4rem;
}
100% {
width: 2rem;
height: 2rem;
margin-left: 5rem;
}
}
</style>
5、animation-play-state:检索或设置对象动画的状态(running\paused)
<template>
<div class="test"></div>
</template>
<script>
export default {
name: "",
components: {},
data() {
return {};
},
mounted() {
setTimeout(() => {
this.$refs.ref_test.style.animationPlayState = "paused";
}, 3000);
setTimeout(() => {
this.$refs.ref_test.style.animationPlayState = "running";
}, 5000);
}
};
</script>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
animation: mymove 2s;
animation-iteration-count: 3;//只循环三次
}
@keyframes mymove {
0% {
width: 2rem;
height: 2rem;
}
50% {
width: 4rem;
height: 4rem;
}
100% {
width: 2rem;
height: 2rem;
margin-left: 5rem;
}
}
</style>
6、animation-direction;是否反向运动
- normal 默认值。动画按正常播放。
- reverse 动画反向播放。
- alternate 动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。
- alternate-reverse 动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。
- initial 设置该属性为它的默认值。
- inherit 从父元素继承该属性。
<template>
<div class="test"></div>
</template>
<style lang="scss" scoped>
.test {
background-color: orange;
width: 2rem;
height: 2rem;
border-radius: 50%;
animation: mymove 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes mymove {
0% {
width: 2rem;
height: 2rem;
}
50% {
width: 4rem;
height: 4rem;
}
100% {
width: 2rem;
height: 2rem;
margin-left: 5rem;
}
}
</style>
三、transform
rotate
<template>
<img src="./二哈.jpg" />
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myRotate 2s infinite linear;
}
@keyframes myRotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
rotateX
<template>
<img src="./二哈.jpg" />
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myRotateX 2s infinite linear;
}
@keyframes myRotateX {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(360deg);
}
}
</style>
rotateY
<template>
<img src="./二哈.jpg" />
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myRotateY 2s infinite linear;
}
@keyframes myRotateY {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
translate
<template>
<div>
<img src="./二哈.jpg" />
</div>
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myTranslate 2s infinite linear;
}
@keyframes myTranslate {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(8rem, 8rem);
}
}
</style>
translateX
<template>
<div>
<img src="./二哈.jpg" />
</div>
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myTranslateX 2s infinite linear;
}
@keyframes myTranslateX {
0% {
transform: translateX(0);
}
100% {
transform: translateX(8rem);
}
}
</style>
translateY
<template>
<div>
<img src="./二哈.jpg" />
</div>
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myTranslateY 2s infinite linear;
}
@keyframes myTranslateY {
0% {
transform: translateY(0);
}
100% {
transform: translateY(8rem);
}
}
</style>
scale
<template>
<div>
<img src="./二哈.jpg" />
</div>
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myScale 2s infinite linear;
}
@keyframes myScale {
0% {
transform: scale(0, 0);
}
100% {
transform: scale(1, 1);
}
}
</style>
scaleX
<template>
<div>
<img src="./二哈.jpg" />
</div>
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myScaleX 2s infinite linear;
}
@keyframes myScaleX {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
</style>
scaleY
<template>
<div>
<img src="./二哈.jpg" />
</div>
</template>
<style lang="scss" scoped>
img {
width: 3rem;
height: 4rem;
border-radius: 50%;
animation: myScaleY 2s infinite linear;
}
@keyframes myScaleY {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
</style>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献7条内容
所有评论(0)