一.CSS有如下三个属性
(1)CSS的动画属性
(2)CSS过渡属性
(3)vue过渡和动画
二、transition , animation的区别
transition 只能声明元素变化从开始到结束之间的变化关系。而 animation 则是可以自由的定义一段动画在元素上的开始和结束。而且你能通过animation-iteration-count来设置动画的次数;通过过渡transition属性,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果,要实现这一点,必须实现一项内容,即指定效果的持续时间。
transition: 强调是单一属性的动画效果,从开始到结束整个过程,中间不会发生动画的转折animation:强调的是多种动画属性的结合,能够有效的排列动画执行时间的 某时做某事 ,从开始到结束的过程可以是简单,也可以是复杂。算是 transition 的加强版
注:不是所有的CSS样式值都可以过渡,只有具有中间值的属性才具备过渡效果
下面对css动画与过渡进行演示
代码分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* trasition 案例 */
/* div {
width: 200px;
height: 200px;
background-color: #ccc;
transition: all 3s;
} */
/* @keyframes do {
from {
width: 0;
}
to {
width: 200px;
}
} */
/* trasition 案例 */
/* div:hover {
width: 400px;
height: 300px;
background-color: pink;
} */
/* transform 案例 */
/* 左手法则,手背朝着自己,大拇指的朝向为我们的正值,握拳旋转方向即为旋转正值方向 */
/* .one {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 100px auto;
transition: all 1s;
}
div {
background-color: red;
height: 100px;
}
.one:hover {
transform: rotateZ(360deg);
transform: scaleY(.5);
transform: translate(50%);
} */
/* 动画案例 */
.one {
width: 200px;
height: 200px;
background-color: #ccc;
animation: move 3s infinite;
}
/* 动画声明块 */
@keyframes move {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(300px, 0px);
}
75% {
transform: translate(300px, 300px);
}
100% {
transform: translate(0px, 300px);
}
}
</style>
</head>
<body>
<div class="one">123</div>
<!-- transition 过渡 -->
<!--
property duration timing-function delay
过渡属性 过渡耗时 速度曲线 等待时间
property 和 duration 这两个属性是必写项
-->
<!-- transform 变形 -->
<!-- rotate scale translate
旋转 放大缩小 位移
scale 第一个值控制我们X轴方向的大小,即宽度,第二个值控制我们y轴方向的大小,即高度\
特性:放大和缩小的时候不会影响到其他元素的布局
translate
当该属性的值为百分比的时候,它的参照物是该元素自身。即移动距离是自身宽度或者高度的相应百分比。
可以配合绝对定位进行 块级元素的水平垂直居中
-->
<!-- animation 动画 -->
<!--
animation: name duration timing-function delay iteration-count direction fill-mode; 复合型写法
动画名称 过渡耗时 速度曲线 等待时间 循环次数 是否反向播放 动画停止方向
-->
<!-- animation-play-state 暂停动画 -->
</body>
</html>