CSS3动画特性

下面的是我的笔记

1、transition： 平衡过渡

 transition ：过渡效果的 CSS 属性的名称  完成过渡效果需要多少秒或毫秒  速度效果的速度曲线  过渡效果何时开始

1）过渡效果的 CSS 属性的名称（一般有）：all、no、 width、height

2）速度效果的速度曲线（动画的速度曲线）：

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 之间的数值。

 

2、animation： 动画

     一般通过@keyframes 规则，创建动画。 在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

例子：

animation: mymove  开始时间  动画的速度曲线  延迟  重复次数 是否应该轮流反向播放动画

 
 

   
   

    
    

   
   
   
   

    
    

     
     @keyframes mymove
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     0%   {top:0px;}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     25%  {top:200px;}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     50%  {top:100px;}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     75%  {top:200px;}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     100% {top:0px;}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

 

3、transform： 改变元素的大小、位置

注意：粉红色为图形原来的样子，大红色为变化后的样子

1) translate:移动

translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

2) rotate：旋转    

   旋转的时候，可以给旋转的模块设置一个原点 (下图的圆心为设置的原点，模块内的点为原始的原点)

transform-origin: x , y;

3) scale：放缩

4) skew：扭曲（倾斜）

5) matrix:矩阵，一般用来变换前面四种没有的效果，也可以实现前面四种效果

      请看：Matrix详解

 

4、动画技巧：

 

1、animation-delay：设置为负值

animation-delay：定义动画何时开始

默认为0	立即执行动画
正值	延迟指定时间后执行动画
负值	立即执行，但跳过指定时间后进入动画（比如取值 -1，即是跳过动画执行的一秒，从 00:01 开始执行动画）

例子：

1）效果图 ：动画延迟

2）代码：animation-delay

 

2、设置border的颜色

边框分为4部分

border-left-color、border-top-color、border-right-color、border-bottom-color

例子：

1）效果图：边框颜色

2）代码：border-left+animation+transform

3、设置border的宽度

border-left-width、border-top-width、border-right-width、border-bottom-width

例子：

1）效果图：折角效果图

2）代码：折角效果

        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/clmmei_123">
                <img src="https://profile.csdnimg.cn/B/6/E/3_clmmei_123" class="avatar_pic" username="clmmei_123">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/clmmei_123" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">clmmei_123</a></span>
                    <!-- 等级，level -->
                                            <img class="identity-icon" src="https://csdnimg.cn/identity/blog4.png">                                            </div>
                <div class="text"><span>原创文章 23</span><span>获赞 17</span><span>访问量 8万+</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extend1&quot;:&quot;个人信息未关注&quot;}">关注</a>
                                                            <a href="https://im.csdn.net/im/main.html?userName=clmmei_123" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                    </a>
                                </div>
                        </div>
                    
    </div>