大家好，我正在尝试制作类似手机从顶部掉下来的动画，当它到达底部时，它会旋转和倾斜，使其看起来像是三维形状，但我制作的动画似乎在关键帧中达到100%时一直在闪烁，有人能向我展示如何实现这一点的技巧、技巧或示例吗？谢谢，这是我的代码，希望能有所帮助。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script defer src="brands.js"></script>
<script defer src="solid.js"></script>
<script defer src="fontawesome.js"></script>
<style type="text/css">
.phone{
width: 600px;
height: 1080px;
background-color: black;
border-radius: 9%;
margin: 50% auto;
position: relative;
animation: bounce 2s ease-in-out forwards;
}
@keyframes bounce {
0% { transform: translateY(-500px); }
50% { transform: translateY(0); }
70% { transform: translateY(-200px); }
100%{
transform: translateY(-50px) rotate(30deg) skew(5deg,347deg);;
}
}
.inner-phone{
width: 553px;
height: 1039px;
background-color: #f5f7fa;
position: absolute;
left: 9px;
top: 14px;
border-radius: 9%;
overflow: hidden;
}
.inner-phone:before{
content: "";
width: 200px;
height: 10px;
background-color: black;
position: absolute;
bottom: 50px;
left: 0;
right: 0;
margin:auto;
border-radius: 50px;
z-index: 1;
}
.inner-slider{
width: 330px;
height: 170px;
position: relative;
margin-left: 201px;
margin-top: 30px;
perspective: 1400px;
transform-style: preserve-3d;
z-index: 10;
}
.circle{
position: absolute;
width: 150px;
text-align: center;
height: 150px;
left: 0;
top: 0;
color: white;
font-weight: bold;
border-radius: 50%;
cursor: pointer;
transition: transform 400ms ease;
background-color: red;
box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
transform: translate3d(0%, 0, 0px);
transition: 0.5s ease-in-out;
}
.circle label{
line-height: 10px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
margin-top: 44px;
font-size: 30px;
}
.one {
background: tomato;
transform: translate3d(0%, 0, 0px);
}
.two {
background: yellowgreen;
transform: translate3d(73%, 0, -450px);
}
.three {
background: dodgerblue;
transform: translate3d(148%, 0, -1045px);
}
.four {
background: slateblue;
transform: translate3d(-239%, 0, -1045px);
}
.five {
background: violet;
transform: translate3d(-110%, 0, -450px);
}
.inner-screen{
width: 100%;
height: 100%;
}
.chat-screen{
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.container-chat{
width: 100%;
height: 100%;
position: absolute;
display: flex;
transition: all 0.5s ease-in;
}
.chat-item{
min-width: 100%;
}
.ci1{
background-color: tomato;
}
.ci2{
background-color: yellowgreen;
}
.ci3{
background-color: dodgerblue;
}
.ci4{
background-color: slateblue;
}
.ci5{
background-color: violet;
}
#wrapper {
width: 100%;
margin: 200px auto;
}
body {
font-family: Arial;
background: #fff;
}
.chat ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.message-left .message-time {
display: block;
font-size: 12px;
text-align: left;
padding-left: 30px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-right .message-time {
display: block;
font-size: 12px;
text-align: right;
padding-right: 20px;
padding-top: 4px;
color: #ccc;
font-family: Courier;
}
.message-left {
text-align: left;
margin-bottom: 16px;
}
.message-left .message-text {
max-width: 80%;
display: inline-block;
background: #fff;
padding: 15px;
font-size: 14px;
color: #999;
border-radius: 30px;
font-weight: 100;
line-height: 1.5em;
}
.message-right {
text-align: right;
margin-bottom: 16px;
}
.message-right .message-text {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 15px;
font-size: 14px;
color: #fff;
border-radius: 30px;
line-height: 1.5em;
font-weight: 100;
text-align: left;
}
.chat {
padding: 20px;
}
.chat-container {
height: 400px;
overflow: scroll;
overflow-y:hidden;
overflow-x: hidden;
padding-right: 16px;
}
.spinme-right {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinme-left {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
color: #ccc;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinner {
margin: 0;
width: 30px;
text-align: center;
}
.spinner > div {
width: 10px;
height: 10px;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
background: rgba(0,0,0,1);
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
.rich-message{
width: 100%;
height: 440px;
background-size: 100%;
background-position-x:0px;
background-position-y:26px;
margin-top: 80%;
position: relative;
}
</style>
</head>
<body>
<div class="phone">
<div class="inner-phone">
<div class="inner-screen">
<div class="chat-screen">
<div class="container-chat">
<div class="chat-item ci1">
<div id="wrapper">
<div class="chat">
<div class="chat-container">
<div class="chat-listcontainer">
<ul class="chat-message-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="chat-item ci2">
</div>
<div class="chat-item ci3">
</div>
<div class="chat-item ci4">
</div>
<div class="chat-item ci5">
</div>
</div>
</div>
<div class="rich-message">
</div>
</div>
</div>
<div class="phone-drop-shadow"></div>
</div>
<div class="portal-phone">
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript">
var dd = document.getElementsByClassName('circle');
var chatMessages = [{
name: "ms1",
msg: "Who are you?",
delay: 1000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms2",
msg: "We are young team of entrepreneurs, developers, designers and visionaries. We are based in Berlin and started working on Freedactics in early 2015.",
delay: 6000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms3",
msg: "Could you describe Freedactics in one sentence?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms4",
msg: "Everything from lecture to exam in your pocket: Freedactics is a cloud-based platform build for students needs.",
delay: 7000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms5",
msg: "And the longer version?",
delay: 3000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms6",
msg: "As students we use to organize all our daily life around web and mobile technology, except the actual studying part. For learning we still use huge amounts of paper, books and heavy backpacks.",
delay: 11000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms7",
msg: "Why? Because there is no solution out there to help students or teachers to easily digitalize their learning processes and contents. We think that learning should be fast, simple and effective. A platform for studying should give people the option to learn at their own scope, with their own contents integrated.",
delay: 10000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms8",
msg: "This is why we developed Freedactics – a cloud-based solution tailored to students needs.",
delay: 8000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms9",
msg: "What makes you different from other learning platforms?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms10",
msg: "We understand the needs of individual student. We don’t focus so much on content publishing or learning management but on learning. At the same time we acknowledge the need to integrate different perspectives, such as flash cards, content and task management.",
delay: 8000,
align: "left",
showTime: false,
time: "19:58"
},
{
name: "ms11",
msg: "So we end up with a unique mix of focus on User Experience and thrive towards integration.",
delay: 4000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms12",
msg: "What is your vision for the future?",
delay: 4000,
align: "right",
showTime: true,
time: "19:58"
},
{
name: "ms14",
msg: "We are releasing an App right now. But that’s only breaking ground. In fact, we have something much bigger in mind: a universe of education! Our vision is to connect people, connect tools and power learning through intelligent systems.",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms15",
msg: "Thanks! Something you want to add?",
delay: 3000,
align: "left",
showTime: true,
time: "19:58"
},
{
name: "ms16",
msg: "You are welcome! Yes, check out freedactics.com!",
delay: 9000,
align: "left",
showTime: true,
time: "19:58"
}
];
var chatDelay = 0;
function onRowAdded() {
$('.chat-container').animate({
scrollTop: $('.chat-container').prop('scrollHeight')
});
};
$.each(chatMessages, function(index, obj) {
chatDelay = chatDelay + 4000;
chatDelay2 = chatDelay + obj.delay;
chatDelay3 = chatDelay2 + 10;
scrollDelay = chatDelay;
chatTimeString = " ";
msgname = "." + obj.name;
msginner = ".messageinner-" + obj.name;
spinner = ".sp-" + obj.name;
if (obj.showTime == true) {
chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
}
$(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.msg + "</span>" + chatTimeString + "</div></li>");
$(msgname).delay(chatDelay).fadeIn();
$(spinner).delay(chatDelay2).hide(1);
$(msginner).delay(chatDelay3).fadeIn();
setTimeout(onRowAdded, chatDelay);
setTimeout(onRowAdded, chatDelay3);
chatDelay = chatDelay3;
});
</script>
</body>
</html>您想要实现的是使用css rotate3d函数更容易实现。
只需使用transform: rotate3d(-0.3, 1, 0, 390deg):就可以模拟倾斜元素的旋转
div {
position: absolute;
background-color: red;
height: 240px;
width: 150px;
border-radius: 3px;
transform: rotate3d(-0.3, 1, 0, 30deg);
animation: rotate 1s infinite;
}
@-webkit-keyframes rotate {
100% {
transform: rotate3d(-0.3, 1, 0, 390deg); /* 405 = 360 + 45 */
}
}<div></div>因此，在你的情况下，只需添加掉落的动画，你就会对掉在地上的手机有这样的印象：
body {
height: 350px;
position: relative;
}
div {
position: absolute;
background-color: red;
height: 240px;
width: 150px;
top: 0%;
border-radius: 3px;
transform: rotate3d(-0.3, 1, 0, 30deg);
animation: fall 1s infinite;
}
@-webkit-keyframes fall {
25% {
top: calc(100% - 240px);
transform: rotate3d(-0.3, 1, 0, 45deg);
}
100% {
top: calc(100% - 240px);
transform: rotate3d(-0.3, 1, 0, 405deg);
/* 405 = 360 + 45 */
}
}<div>
<p>
A text...
</p>
</div>您需要在所有关键帧中指定所有动画值，而跳过其他关键帧中的旋转和扭曲值是导致jank的原因。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script defer src="brands.js"></script>
<script defer src="solid.js"></script>
<script defer src="fontawesome.js"></script>
<style type="text/css">
.phone{
width: 600px;
height: 1080px;
background-color: black;
border-radius: 9%;
margin: 50% auto;
position: relative;
animation: bounce 2s ease-in-out forwards;
}
@keyframes bounce {
0% { transform: translateY(-500px) rotate(0) skew(0, 0); }
50% { transform: translateY(0) rotate(0) skew(0, 0); }
70% { transform: translateY(-200px) rotate(0) skew(0, 0); }
100% {
transform: translateY(-50px) rotate(30deg) skew(5deg, 347deg);
}
}
</style>
</head>
<body>
<div class="phone">
<div class="inner-phone">
<div class="inner-screen">
<div class="chat-screen">
<div class="container-chat">
<div class="chat-item ci1">
<div id="wrapper">
<div class="chat">
<div class="chat-container">
<div class="chat-listcontainer">
<ul class="chat-message-list">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="chat-item ci2">
</div>
<div class="chat-item ci3">
</div>
<div class="chat-item ci4">
</div>
<div class="chat-item ci5">
</div>
</div>
</div>
<div class="rich-message">
</div>
</div>
</div>
<div class="phone-drop-shadow"></div>
</div>
<div class="portal-phone">
</div>
</body>
</html>