过渡
来自CloudWiki
transition
transition-delay 设置过渡的延迟时间
transition-duration 设置过渡的过渡时间
transition-timing-function设置过渡的时间曲线linear/ease/ease-in/easeout/ease-in-out/
transition-property设置哪条 CSS 使用过渡none/all/CSS 属性名称列表
@keyframes name{
}
animation:name duration delay count state animation-name 使用@keyframes 定义的动画 animation-delay 设置动画的延迟时间 animation-timing-function 设置动画的时间曲线linear/ease/ease-in/easeout/ease-in-out animation-iteration-count 设置动画播放次数数字/infinite animation-direction 设置动画反向播放 normal/alternate; animation-play-state设置动画播放状态paused/running animation-fill-mode: forwards动画保持最终状态
源代码
<!DOCTYPE html>
<html>
<head>
<title>过渡动画</title>
<meta charset="utf-8">
<style>
.box{
position: relative;
width: 600px;
height: 400px;
border:2px solid blue;
overflow: hidden;
}
.box img{
width: 100%;
height: 100%;
}
.box .con{
position: absolute;
top:-100%;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
transition: 3s ;
}
.box:hover .con{
top:0;
}
.box .main{
width: 100px;
height: 100px;
background-color: red;
animation:translate 2s 1s 1 linear forwards;
}
.box:hover .main{
animation-play-state: paused;
}
@keyframes translate{
0%{
transform: translateX(0) translateY(0);
}
25%{
transform: translateX(500px) translateY(0);
}
50%{
transform: translateX(500px) translateY(300px);
}
75%{
transform: translateX(0) translateY(300px);
}
100%{
transform: translateX(0) translateY(300px);
}
}
</style>
</head>
<body>
<div class="box">
<img src="img/test.jpg">
<div class="con"></div>
</div>
<div class="box">
<div class="main"></div>
</div>
