Bonjour les gars, j'essaie de faire une animation comme un téléphone qui tombe du haut vers le bas, quand il arrive en bas, il tourne et s'incline pour donner l'impression qu'il a une forme 3D, mais il semble que l'animation que j'ai faite continue de clignoter quand il atteint les 100% dans les images clés, quelqu'un peut-il me montrer une astuce, des conseils ou un exemple de la façon dont je peux réaliser cela ? merci, voici mon code, j'espère que cela vous aidera.
<!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>
