首页 / 知识

CSS3过渡跟动画解析

2023-04-11 13:22:00

CSS3过渡跟动画解析
CSS3过渡跟动画
 
这两者的区别，很简单，
过渡就是字面上意思，比如，宽度从1px，慢慢增加到10px，这便是一种过渡；
动画，也是字面上意思，不过跟过渡最大的区别就是最终的状态，不管执行了什么动画，最终的状态会还原，比如说宽度从1px，慢慢增加到10px，动画结束后，会还原到1px。
 
举几个例子，举一反三即可。
1、过渡属性：
 
transition: width 1s linear 2s;
// 等价于
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
实例（鼠标悬浮在div上，3秒后，宽度从150px，2秒的时间均匀增长到400px，然后停止）
 
div {
  width: 150px;
  height: 100px;
  background: blue;
  transition: width 1s linear 3s;
}
div:hover {
  width: 400px;
}
2、动画属性
 
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;// 动画循环次数，永久
animation-direction: alternate;// 动画一个周期结束后，倒序播放，正常是 normal
animation-play-state: running;
// 等价于
animation: myfirst 5s linear 2s infinite alternate;
// 动画名称的两种写法
@keyframes myName1 {
  from {
    background: red;
  }
  to {
    background: yellow;
  }
}
@keyframes myName2 {
  0% {
    background: red;
  }
  50% {
    background: green;
  }
  100% {
    background: blue;
  }
}
实例（div的背景颜色从红色->绿色->蓝色，蓝色->绿色->红色，无限循环）
 
div
{
    animation: myfirst2 5s linear 2s infinite alternate;
}

动画状态执行属性过渡解析

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢