Start Animation из последнего состояния заканчивается CSS

Question

var app = angular.module('dialApp', ['ngAnimate']); 
 

 
angular.module('dialApp').controller('MainController',['$scope', function ($scope) { 
 
    $scope.test = 'Test'; 
 

 
    $scope.left = false; 
 
    $scope.right = false; 
 
    $scope.bottom = false; 
 
    $scope.leftRotate = function() { 
 
    $scope.left = true; 
 
    $scope.right = false; 
 
    $scope.bottom = false; 
 
    } 
 

 
    $scope.rightRotate = function() { 
 
    $scope.left = false; 
 
    $scope.right = true; 
 
    $scope.bottom = false; 
 
    } 
 

 
    $scope.bottomRotate = function() { 
 
    $scope.left = false; 
 
    $scope.right = false; 
 
    $scope.bottom = true; 
 
    } 
 

 
}]);

body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    height: 100%; 
 
} 
 

 
.panel-default { 
 
    border-color: #EFF7FA; 
 
} 
 

 
.panel-default > .panel-heading { 
 
    text-align: justify; 
 
    font-size: large; 
 
    background-color: #EFF7FA; 
 
} 
 

 
.panel-body { 
 
    background-color: #E7F0F4; 
 
    height: 100%; 
 
} 
 

 
.circle { 
 
    background-color: white; 
 
    border: 3px solid #ffa003; 
 
    border-radius: 50%; 
 
    width: 30px; 
 
    height: 30px; 
 
    -webkit-transition: background-color 1s ease-out, transform 1s ease-out; 
 
    -moz-transition: background-color 1s ease-out, transform 1s ease-out; 
 
    -o-transition: background-color 1s ease-out, transform 1s ease-out; 
 
    transition: background-color 1s ease-out, transform 1s ease-out; 
 
} 
 

 
.circle:hover { 
 
    background-color: #ffa003; 
 
    cursor: pointer; 
 
    -ms-transform: scale(1.1, 1.1); 
 
    -moz-transform: scale(1.1, 1.1); 
 
    -o-transform: scale(1.1, 1.1); 
 
    /* IE 9 */ 
 
    -webkit-transform: scale(1.1, 1.1); 
 
    /* Safari */ 
 
    transform: scale(1.1, 1.1); 
 
    /* Standard syntax */ 
 
} 
 

 
.active-circle { 
 
    background-color: #ffa003; 
 
    cursor: pointer; 
 
    -ms-transform: scale(1.1, 1.1); 
 
    -moz-transform: scale(1.1, 1.1); 
 
    -o-transform: scale(1.1, 1.1); 
 
    /* IE 9 */ 
 
    -webkit-transform: scale(1.1, 1.1); 
 
    /* Safari */ 
 
    transform: scale(1.1, 1.1); 
 
    /* Standard syntax */ 
 
} 
 

 
.p-1 { 
 
    float: left; 
 
    line-height: 30px; 
 
    vertical-align: middle; 
 
    margin-right: 10px; 
 
} 
 

 
.p-2 { 
 
    float: left; 
 
    line-height: 30px; 
 
    vertical-align: middle; 
 
    margin-left: 10px; 
 
} 
 

 
.center-element { 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 

 
.image-container { 
 
    position: relative; 
 
    /* margin-left: -120px; */ 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.dial { 
 
    height: 120px; 
 
    width: 120px; 
 
    position: relative; 
 
    z-index: 1; 
 
    /*top: 25px;*/ 
 
    /*animation: rotate 60s infinite steps(60);*/ 
 
} 
 

 

 
.dial:before { 
 
    background-image: url('http://i.imgur.com/GmzAbGi.png'); 
 
    background-repeat: no-repeat; 
 
    content: ""; 
 
    position: absolute; 
 
    height: 25px; 
 
    width: 50px; 
 
    top: -19%; 
 
    right: 29%; 
 
} 
 

 
.dailKnob { 
 
    position: absolute; 
 
    z-index: 3; 
 
    height: 60px; 
 
    width: 60px; 
 
    top: 25%; 
 
    left: 170px; 
 
} 
 

 
.arrow { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 43%; 
 
    /*animation: rotate 60s infinite steps(60);*/ 
 
} 
 

 
.rotate90 { 
 
    -webkit-animation: rotate90d 1.0s forwards; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz--animation: rotate90d 1.0s forwards; 
 
    -moz--animation-fill-mode: forwards; 
 
    -o-animation: rotate90d 1.0s forwards; 
 
    -o-animation-fill-mode: forwards; 
 
    -ms-transform: rotate(90deg) scale(1.3); 
 
    -ms-animation-fill-mode: forwards; 
 
} 
 

 
.rotate180 { 
 
    -webkit-animation: rotate180d 1.0s forwards; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz--animation: rotate90d 1.0s forwards; 
 
    -moz--animation-fill-mode: forwards; 
 
    -o-animation: rotate90d 1.0s forwards; 
 
    -o-animation-fill-mode: forwards; 
 
    -ms-transform: rotate(90deg) scale(1.3); 
 
    -ms-animation-fill-mode: forwards; 
 
    /*-webkit-transform: rotate(180deg) scale(1.3); 
 
    -moz-transform: rotate(180deg) scale(1.3); 
 
    -o-transform:  rotate(180deg) scale(1.3); 
 
    -ms-transform:  rotate(180deg) scale(1.3);*/ 
 
} 
 

 
.rotate270 { 
 
    -webkit-animation: rotate270d 1.0s forwards; 
 
    -webkit-animation-fill-mode: forwards; 
 
    -moz--animation: rotate90d 1.0s forwards; 
 
    -moz--animation-fill-mode: forwards; 
 
    -o-animation: rotate90d 1.0s forwards; 
 
    -o-animation-fill-mode: forwards; 
 
    -ms-transform: rotate(90deg) scale(1.3); 
 
    -ms-animation-fill-mode: forwards; 
 
    /*-webkit-transform: rotate(270deg) scale(1.3); 
 
    -moz-transform: rotate(270deg) scale(1.3); 
 
    -o-transform:  rotate(270deg) scale(1.3); 
 
    -ms-transform:  rotate(270deg) scale(1.3);*/ 
 
} 
 

 

 
@keyframes rotate90d { 
 
    100% { 
 
    transform: rotateZ(90deg); 
 
    } 
 
} 
 

 
@keyframes rotate180d { 
 
    100% { 
 
    transform: rotateZ(180deg); 
 
    } 
 
} 
 

 
@keyframes rotate270d { 
 
    100% { 
 
    transform: rotateZ(270deg); 
 
    } 
 
} 
 

 

 
.sides { 
 
    margin-top: 7%; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<body ng-app="dialApp"> 
 
    <div class="container col-xs-12" ng-controller="MainController"> 
 
    <div class="panel panel-default" style="height: 100%"> 
 
     <div class="panel-heading"> 
 
     <p class="panel-heading"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor nunc, dapibus et est ut, maximus vehicula ipsum. Pellentesque orci purus, maximus eget eros eu, elementum mattis elit. Vivamus leo lacus, hendrerit id fringilla et, accumsan nec ligula.Ut pulvinar odio massa, vitae molestie eros consectetur non. Vivamus nunc lectus, consectetur id ullamcorper venenatis, rutrum in urna. Vestibulum at risus diam. 
 
     </p> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <div class="col-xs-12" style="margin-top: 10px;"> 
 
      <div class="col-xs-12 col-md-offset-3 col-md-6" style="height: 120px; margin-bottom: 60px;"> 
 
      <div class="col-xs-2 sides" > 
 
       <b class="p-1">Yes </b> 
 
       <div class="circle" style="float: left;" ng-class="{ 'active-circle' : left }" ng-click="leftRotate()"></div> 
 
      </div> 
 
      <div class="col-xs-8"> 
 
       <div class="image-container" style="width: 400px;"> 
 
       <!-- <img src="images/selectionArrow.png" class="arrow">--> 
 
       <div class="dial center-element" ng-class="{'rotate270' : left ,'rotate90' : right,'rotate180' : bottom }"> 
 
        <img src="http://i.imgur.com/fVrS3hS.png"> 
 
       </div> 
 
       <img class="dailKnob" src="http://i.imgur.com/VrnjQcT.png"> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-2 sides" > 
 
       <div class="circle" style="float: left;" ng-class="{ 'active-circle' : right }" ng-click="rightRotate()"></div> 
 
       <b class="p-2">No</b> 
 
      </div> 
 

 
      </div> 
 
      <div class="col-xs-12 col-md-offset-3 col-md-6"> 
 
      <div class="col-xs-2 sides"> 
 
       &nbsp; 
 
      </div> 
 
      <div class="col-xs-8"> 
 
       <div class="image-container" style="width: 400px;"> 
 
       <div class="circle center-element" ng-class="{ 'active-circle' : bottom }" ng-click="bottomRotate()"></div> 
 
       <div class="center-element" ><b>May be</b></div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-2"> 
 
       &nbsp; 
 
      </div> 
 

 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>

http://plnkr.co/edit/Ou5bucYMDYdIOFUUAZeH?p=preview

Я хочу создать его как тип часы анимация .. в этом, когда пользователь нажимает на NO -> стрелка будет идти, чтобы закрыть с анимацией , тогда, когда пользователь нажмет на May Be ... он начнется с No to May be .. Но теперь .. начинать с первого кадра .. для того, чтобы это могло быть да ..

Answer 1

Просто используйте css-transition вместо css-animation

1. Для .dial элемента установлен transition:all 1s ease; (или таможня оно, как вам нужно).
2. Для .rotate90, .rotate180 и .rotate270 вместо анимации заменить его на transform: rotateZ(your_deg);

Как это:

var app = angular.module('dialApp', ['ngAnimate']); 
 

 
angular.module('dialApp').controller('MainController',['$scope', function ($scope) { 
 
    $scope.test = 'Test'; 
 

 
    $scope.left = false; 
 
    $scope.right = false; 
 
    $scope.bottom = false; 
 
    $scope.leftRotate = function() { 
 
    $scope.left = true; 
 
    $scope.right = false; 
 
    $scope.bottom = false; 
 
    } 
 

 
    $scope.rightRotate = function() { 
 
    $scope.left = false; 
 
    $scope.right = true; 
 
    $scope.bottom = false; 
 
    } 
 

 
    $scope.bottomRotate = function() { 
 
    $scope.left = false; 
 
    $scope.right = false; 
 
    $scope.bottom = true; 
 
    } 
 

 
}]);

body { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    height: 100%; 
 
} 
 

 
.panel-default { 
 
    border-color: #EFF7FA; 
 
} 
 

 
.panel-default > .panel-heading { 
 
    text-align: justify; 
 
    font-size: large; 
 
    background-color: #EFF7FA; 
 
} 
 

 
.panel-body { 
 
    background-color: #E7F0F4; 
 
    height: 100%; 
 
} 
 

 
.circle { 
 
    background-color: white; 
 
    border: 3px solid #ffa003; 
 
    border-radius: 50%; 
 
    width: 30px; 
 
    height: 30px; 
 
    -webkit-transition: background-color 1s ease-out, transform 1s ease-out; 
 
    -moz-transition: background-color 1s ease-out, transform 1s ease-out; 
 
    -o-transition: background-color 1s ease-out, transform 1s ease-out; 
 
    transition: background-color 1s ease-out, transform 1s ease-out; 
 
} 
 

 
.circle:hover { 
 
    background-color: #ffa003; 
 
    cursor: pointer; 
 
    -ms-transform: scale(1.1, 1.1); 
 
    -moz-transform: scale(1.1, 1.1); 
 
    -o-transform: scale(1.1, 1.1); 
 
    /* IE 9 */ 
 
    -webkit-transform: scale(1.1, 1.1); 
 
    /* Safari */ 
 
    transform: scale(1.1, 1.1); 
 
    /* Standard syntax */ 
 
} 
 

 
.active-circle { 
 
    background-color: #ffa003; 
 
    cursor: pointer; 
 
    -ms-transform: scale(1.1, 1.1); 
 
    -moz-transform: scale(1.1, 1.1); 
 
    -o-transform: scale(1.1, 1.1); 
 
    /* IE 9 */ 
 
    -webkit-transform: scale(1.1, 1.1); 
 
    /* Safari */ 
 
    transform: scale(1.1, 1.1); 
 
    /* Standard syntax */ 
 
} 
 

 
.p-1 { 
 
    float: left; 
 
    line-height: 30px; 
 
    vertical-align: middle; 
 
    margin-right: 10px; 
 
} 
 

 
.p-2 { 
 
    float: left; 
 
    line-height: 30px; 
 
    vertical-align: middle; 
 
    margin-left: 10px; 
 
} 
 

 
.center-element { 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 

 
.image-container { 
 
    position: relative; 
 
    /* margin-left: -120px; */ 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.dial { 
 
    height: 120px; 
 
    width: 120px; 
 
    position: relative; 
 
    z-index: 1; 
 
    /* this element will animate because of this */ 
 
    transition:all 1s ease; 
 
} 
 

 

 
.dial:before { 
 
    background-image: url('http://i.imgur.com/GmzAbGi.png'); 
 
    background-repeat: no-repeat; 
 
    content: ""; 
 
    position: absolute; 
 
    height: 25px; 
 
    width: 50px; 
 
    top: -19%; 
 
    right: 29%; 
 
} 
 

 
.dailKnob { 
 
    position: absolute; 
 
    z-index: 3; 
 
    height: 60px; 
 
    width: 60px; 
 
    top: 25%; 
 
    left: 170px; 
 
} 
 

 
.arrow { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 43%; 
 
} 
 

 
.rotate90 { 
 
    /* use transform instead animation */ 
 
    transform: rotateZ(90deg); 
 
} 
 

 
.rotate180 { 
 
    transform: rotateZ(180deg); 
 
} 
 

 
.rotate270 { 
 
    transform: rotateZ(270deg); 
 
} 
 

 
.sides { 
 
    margin-top: 7%; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<body ng-app="dialApp"> 
 
    <div class="container col-xs-12" ng-controller="MainController"> 
 
    <div class="panel panel-default" style="height: 100%"> 
 
     <div class="panel-heading"> 
 
     <p class="panel-heading"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor nunc, dapibus et est ut, maximus vehicula ipsum. Pellentesque orci purus, maximus eget eros eu, elementum mattis elit. Vivamus leo lacus, hendrerit id fringilla et, accumsan nec ligula.Ut pulvinar odio massa, vitae molestie eros consectetur non. Vivamus nunc lectus, consectetur id ullamcorper venenatis, rutrum in urna. Vestibulum at risus diam. 
 
     </p> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <div class="col-xs-12" style="margin-top: 10px;"> 
 
      <div class="col-xs-12 col-md-offset-3 col-md-6" style="height: 120px; margin-bottom: 60px;"> 
 
      <div class="col-xs-2 sides" > 
 
       <b class="p-1">Yes </b> 
 
       <div class="circle" style="float: left;" ng-class="{ 'active-circle' : left }" ng-click="leftRotate()"></div> 
 
      </div> 
 
      <div class="col-xs-8"> 
 
       <div class="image-container" style="width: 400px;"> 
 
       <!-- <img src="images/selectionArrow.png" class="arrow">--> 
 
       <div class="dial center-element" ng-class="{'rotate270' : left ,'rotate90' : right,'rotate180' : bottom }"> 
 
        <img src="http://i.imgur.com/fVrS3hS.png"> 
 
       </div> 
 
       <img class="dailKnob" src="http://i.imgur.com/VrnjQcT.png"> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-2 sides" > 
 
       <div class="circle" style="float: left;" ng-class="{ 'active-circle' : right }" ng-click="rightRotate()"></div> 
 
       <b class="p-2">No</b> 
 
      </div> 
 

 
      </div> 
 
      <div class="col-xs-12 col-md-offset-3 col-md-6"> 
 
      <div class="col-xs-2 sides"> 
 
       &nbsp; 
 
      </div> 
 
      <div class="col-xs-8"> 
 
       <div class="image-container" style="width: 400px;"> 
 
       <div class="circle center-element" ng-class="{ 'active-circle' : bottom }" ng-click="bottomRotate()"></div> 
 
       <div class="center-element" ><b>May be</b></div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-2"> 
 
       &nbsp; 
 
      </div> 
 

 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>