css动画效果之transition(动画过渡效果属性)

 

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>


<style>
    .box{
        width: 100px;
        height: 100px;
        margin:50px auto;
        background-color: #f00;
        /* 为离开的动作也添加过渡效果 */
        transition: all 1s ease-in 1s;
    }
    .box:hover{
        height: 200px;
        width: 200px;
        border-radius: 50%;
        background-color: #666;
        /* transition-property:width,height,border-radius;
        transition-duration: 1s;
        transition-timing-function:ease-in;
        transition-delay:1s; */
        transition: all 1s ease-in 1s;
    }

style>
<body>
    <div class="box">div>
body>
html>

 

 

 

 

Document

 

转载于:https://www.cnblogs.com/cl94/p/10507064.html

你可能感兴趣的:(css动画效果之transition(动画过渡效果属性))