Я пытаюсь анимировать переворот SVG по горизонтали, используя следующее:
.animated {
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes customAnimation {
0% {
top: 0;
right: 3px;
transform: scaleX(1);
visibility: visible;
}
100% {
top: 0;
right: -172px;
transform: scaleX(-1);
}
}
.customAnimation {
animation-name: customAnimation;
}
Когда элемент, который я пытаюсь повернуть, получает как классы .customAnimation, так и animated, когда я хочу начать переворот.
Проблема в том, что в середине анимации элемент представляет собой прямую линию. В идеале он должен сохранять некоторую толщину / вес, чтобы он выглядел более трехмерным. Я добавил фрагмент, чтобы продемонстрировать: (если у вас есть проблемы с запуском фрагмента, соответствующий код включен ниже) [нажмите кружок замка, чтобы начать]
$(".lock-circle").on("click", function(e){
var $this = $(".lock-top");
if($this.hasClass("animated")){
$this.removeClass("animated");
$this.removeClass("customAnimation");
}else{
$this.addClass("animated customAnimation");
}
});body {
background: #333;
}
.container {
width: 300px;
min-height: 50%;
margin: 0 auto;
background: #FF9B02;
padding: 15px;
position: relative;
}
svg {
display: block;
position: relative;
}
.lock-top, .lock-circle {
width: 80%;
margin: 0 auto;
cursor: pointer;
}
.lock-top { top: 0; right: 3px }
.lock-circle { top: -90px; }
/*******************************
* Animation
****************************/
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes customAnimation {
0% {
top: 0;
right: 3px;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
right: -172px;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
}
@keyframes customAnimation {
0% {
top: 0;
right: 3px;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
right: -172px;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
}
.customAnimation {
-webkit-animation-name: customAnimation;
animation-name: customAnimation;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<svg class="lock-top" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 111 114" style="enable-background:new 0 0 111 114;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
}
</style>
<path class="st0" d="M100,67.7c-0.3-23.8-19.6-43-43.5-43S13.3,43.9,13,67.7h0v13h8V68.2c0-19.6,15.9-35.5,35.5-35.5
S92,48.6,92,68.2v22.5h8L100,67.7L100,67.7z" />
</svg>
<svg class="lock-circle" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 111 114" style="enable-background:new 0 0 111 114;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
}
</style>
<path class="st0" d="M98.5,25.7v-15h-8v6.2c-9.3-8.2-21.6-13.2-35-13.2c-29.3,0-53,23.7-53,53c0,29.3,23.7,53,53,53s53-23.7,53-53
C108.5,45.1,104.8,34.4,98.5,25.7z M55.5,97.7c-22.6,0-41-18.4-41-41c0-22.6,18.4-41,41-41c22.6,0,41,18.4,41,41
C96.5,79.3,78.1,97.7,55.5,97.7z M55.5,20.7c-19.9,0-36,16.1-36,36c0,19.9,16.1,36,36,36c19.9,0,36-16.1,36-36
C91.5,36.8,75.4,20.7,55.5,20.7 M60,59.6c0,0,2.8,11.5,0.3,14c-1.7,1.7-7.9,1.7-9.6,0c-2.5-2.5,0.3-14,0.3-14
c-1.9-1.4-3.1-3.5-3.1-6c0-4.2,3.4-7.6,7.6-7.6c4.2,0,7.6,3.4,7.6,7.6C63.1,56.1,61.8,58.3,60,59.6" />
</svg>
</section>http://codepen.io/csengineer13/pen/JRdJjX
Изменить: Предлагаемое решение использует z-index и серию слоев для добавления глубины вращающемуся объекту. По сути, он создает две новые формы, которые обеспечивают глубину и край, которые видны при вращении. Проблема в том, что решение для простой формы; круг и не работает для более сложных фигур SVG.
Вот пример решения этого вопроса:
http://codepen.io/csengineer13/pen/qadQXR
Не разрешает / не исправляет; и я сомневаюсь, что его можно модифицировать для работы.
::after, который предварительно повернут, так что, когда все остальное вращается, этот элемент встает и создает видимость высоты. - person CodingWithSpike schedule 08.09.2016