前端Day07-1动画、过渡、变形

动画 

一、动画的使用分为两部分：

        1、定义动画

        2、调用动画 

 二、动画序列

        0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
        在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。                动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。                                                                                                                                                    请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%

三、动画常用属性

tip1动画简写属性：

        animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;                                                                                                                                    简写属性里面不包含animation-play-state
        暂停动画: animation-play-state: puased;经常和鼠标经过:hover等其他配合使用                      想要动画走回来，而不是直接跳回来: animation-direction : alternate (逆播放)                          盒子动画结束后，停在结束位置: animation-fill-mode : forwards

 tip2:第三方库

        iconfont：字体图标库 原理：网络字体 @font-face()    font-family                            bootstrap：栅格布局、flex、layout                                                                                 animate.css:动画库 原理animation

 过渡

         过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
        过渡动画︰是从一个状态渐渐的过渡到另外—个状态
        可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本）但是不会影响页面布局。
        经常和:hover一起搭配使用。

transition:要过渡的属性  花费时间  运动曲线  何时开始;

        1.属性:想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
        2.花费时间:单位是秒(必须写单位）比如0.5s                                                                                      3.运动曲线:默认是ease (可以省略)
        4.何时开始:单位是秒(必须写单位）可以设置延迟触发时间默认是0s(可以省略)

变形

        transform:skew();                                                                                                                               transform- style:skew();                                                                                                                      transform-origin():  top/left;

拉伸scale 

旋转rotate

缩放scale

平移translate