码迷,mamicode.com
首页 > Web开发 > 详细

CSS3的过渡和动画

时间:2020-01-08 21:22:40      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:元素   str   时间   正是   准备   eps   20px   格式   实现   

 

在css3中可以实现很多一些动态效果,css3逐步取代了Flash,可以通过他带来的新特性帮助我们轻易解决一些问题,例如图片的圆角可以直接使用border-radius就可以解决,无需再使用ps解决,并且css3可以减少开发和维护成本,并且还能提高页面性能,因为一些动态效果我们不需要再去使用JS就可以完成

 

过渡:transition

过渡是什么?

我的理解是,当一个元素通过某个条件触发时(例如:hover)改变成另一个属性的过程,更通俗一点来说就是一个人起床到下床,总不会直接就蹦起来准备出门吧,而中间这个穿衣服和洗漱正是过渡的操作

 

.box{
width: 120px;
height: 120px;
border:10px solid;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.box:hover{
left: 50px;
top: 120px;
background: #742;
border: 20px solid #456;
}

transition:all 0.3s  可以解释为一切变化都用0.3s完成

接下来分解transition

transition-property:设置过得的属性

transition-duration:设置过渡所需的时间

transition-timing-function:  ease(默认过渡样式)

            linear 线性过渡

            ease-in  过渡由慢到快

            ease-out 过渡由快到慢

            ease-in-out 过渡线慢再快

过渡还可以多写

例:transition:margin-left  3s,margin-top  5s;

 

 

动画:animiation

这个是干啥的呢?

可以重复并且在相应帧做不同的和多种动画

animiation需要搭配keyframes来使用,

例:

@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -2400px 0;
}
}
.house{
width: 200px;
height: 100px;
background: url(img.png);
background-repeat: no-repeat;
background-position: 0 0;
animation: run 1s infinite steps(12,end) forwards;
};

先解释 keyframes的作用

标准格式  @keyframes  运动name{

     这里有两种写法:

      第一种:

      form{

      background:red     这里表示运动开始的状态,一开始背景颜色为红色  

        }

      to{

        background:#000    表示最后为黑色

        }

      第二种(相应帧)这种通过百分比的可以更细致的规划相应的变化

       0%{

       background:red

      }  

        50%{

       background:#000

      } 

      100%{

       background:blue

      }

}

 

然后通过animiation来引用

 animiation: 运动名  5s(运动时间) infinite(表示重复播放,不写则只播放一次) step(步数(每个状态切换的步数),end(end表示丢失最后一帧,白柳当前帧的状态,若为start表示丢失第一帧,保留下一帧) forwards(表示当运动结束后保留最后一整的状态,不写则动画结束后回归原始样式) alternate(表示动画倒放))

 

以上是animiation的多写格式

分布来说:

animiation-name:运动名(也就是keyframes的运动名)

animiation-duration:表示运动时间

animiation-timing-function:linaer 表示线性渐变,这里和过渡的变化一致的

animiation-delay:2s  表示延时2s才开始运动

animiation-itearation-count:2  表示执行2次动画

 

在animiation中也有hover属性;

animiation-play-state:paused  暂停该动画

CSS3的过渡和动画

标签:元素   str   时间   正是   准备   eps   20px   格式   实现   

原文地址:https://www.cnblogs.com/hzqzwl/p/12168439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!