css3 里的动画——过渡动画

1.属性：transition

需要规定内容：

（1）指定要添加效果的CSS属性

（2）指定效果的持续时间。

注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。

属性解释：

transition-delay 动画的延迟
transition-delay:1s;
transition-duration 动画的执行时间
transition-duration: 1s;
transition-timing-function动画的执行方式  linear 匀速  ease-in  慢开   ease-in-out 慢开慢关
transition-timing-function: linear;
transition-property  过渡什么属性  margin-left  如果要过渡多个属性 分开  all 过渡所有属性
transition-property:margin-left;

下面我们来做两个实例：

• 菜单阴影动态效果

（1）做一个菜单

    
首页
    
公司文化
    
公司招聘
    
公司简介
    
练习我们

效果展示;

（2）加上文字阴影，做出动画效果

li{
            text-shadow: 30px -15px 1px black;
            transform: rotatex(0deg);
            transition: text-shadow .5s ease-in,transform 0.5s ease-in-out;
        }
        li:hover{
            text-shadow: 0px 0px 1px white;
        }
        /*鼠标悬停出现阴影*/
        

上述两步之后效果就可以出现啦！！

• 图片放大效果

（1）在盒子里放入图片

效果展示：

（2）加入过渡和鼠标悬停效果

效果展示：